<template>
  <el-dialog title="裁图尺寸设置" width="800px" :visible.sync="dialogVisible">
    <el-form ref="CropSize" v-loading="loading">
      <el-form-item class="crop-size-form" v-for="(acc, index) in form" :key="index">
        <div class="crop-size-left">
          <el-input v-model="acc.positionName" size="small" disabled></el-input>
          <span>:</span>
          <el-input-number size="small" v-model="acc.width" :controls="false"></el-input-number>
          <span>x</span>
          <el-input-number size="small" v-model="acc.height" :controls="false"></el-input-number>
          <span>px</span>
        </div>
        <!-- <span class="crop-size-right" @click="del(acc, index)" v-if="index > 0">删除</span> -->
      </el-form-item>
    </el-form>
    <!-- <el-button
      size="small"
      @click="addCropSize()"
    >
      添加新模板
    </el-button> -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="comfirmLoading" @click="handleConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: "CropSizeModal",
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      form: [
        {
          id: '',
          positionName: '',
          width: null,
          height: null
        }
      ],
      // 后期可能需要用到，勿删
      sizes: [
        {label: '1600*1600 主图', value: 'main'},
        {label: '1800*2400 主图', value: 'main'},
        {label: '1600*2400 竖图', value: 'list'},
        {label: '1800*2400 展示图', value: 'list'},
        {label: '1600*1600 模特图', value: 'model'}
      ],
      dialogVisible: false,
      comfirmLoading: false
    };
  },
  computed: {
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.comfirmLoading = false;
      }
    }
  },
  methods: {
    show() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.form = this.list.map(acc => {
          return {
            id: acc.id,
            positionName: acc.positionName,
            width: acc.width,
            height: acc.height,
            sort: acc.sort
          }
        })
      })
    },
    handleConfirm() {
      this.comfirmLoading = true;
      request({
        url: '/sizeTemplate/update',
        method: 'post',
        data: this.form
      }).then(res => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$emit('success');
        }
      }).finally(() => {
        this.comfirmLoading = false;
      })
    },
    isOptionDisabled(value, currentIndex) {
      return this.form.some(
        (item, index) =>
          index !== currentIndex && item.selectValue === value
      )
    },
    addCropSize() {
      this.form.push({
        id: '',
        positionName: '',
        width: null,
        height: null
      })
    },
    del(row, itemIndex) {
      //删除
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        request({
          url: `/sizeTemplate/delete?id=${row.id}`,
          method: 'post'
        }).then(res => {
          if (res.code == 200) {
            this.form.splice(itemIndex, 1); 
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 3000
            });
          }
        }).finally(() => {
          this.loading = false;
        })
        
      });
    },
    changeSelect(val, index) {
      const match = val.match(/(\d+)\*(\d+)/);

      const width = Number(match[1]);
      const height = Number(match[2]);
      if (!this.form[index].width) {
        this.form[index].width = width;
      }
      if (!this.form[index].height) {
        this.form[index].height = height;
      }
    }
  }
};
</script>
<style lang="scss">
  .crop-size-form {
    .el-form-item__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      line-height: 32px;

      &::before,&::after {
        display: none;
      }

      .crop-size-left {
        display: flex;
        gap: 10px;

        >.el-input {
          width: 200px;
        }
      }
      .crop-size-right {
        padding: 0 10px;
        cursor: pointer;
        color: #ac0917;
      }
    }
  }
</style>


