<template>
  <el-dialog
    :title="$t('form.clean_data')"
    :visible.sync="clearVisible"
    width="30%"
    :before-close="handleClose"
    :append-to-body="true"
  >
    <span>
      <el-table
        :data="fieldData"
        @selection-change="handleSelectionChangeField"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" :label="$t('form.all')">
          <template slot-scope="scope">
            <!-- scope.$index,scope.row -->
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
      </el-table>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">{{
        $t('btns.cancel')
      }}</el-button>
      <el-button type="primary" @click="handleClearFieldData" size="small" :loading="btnLoading">{{
        $t('btns.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getClearFieldData,
  handleClearFieldData,
} from "@/service/FormApi.js";
import {delMsg} from '@/utils/elementui'
export default {
  name: '',
  data() {
    return {
      clearVisible: false, //清除数据对话框
      fieldData: [],

      multipleSelectionfieldName: [], // 选中要清除的记录的名称
      multipleSelectionfieldArray: [], // 选中要清除记录的数组
      btnLoading: false, // 按钮的加载图标
    }
  },
  props: {
    formId: String
  },
  methods:{
    /**
     * 打开清除数据对话框
     */
    async onClearField() {
      const response = await getClearFieldData(this.formId);
      if (response.data.errcode == 0) {
        this.fieldData = response.data.data;
      }
      this.clearVisible = true;
    },

    /**
     * 关闭清除数据对话框
     */
    handleClose() {
      this.clearVisible = false;
    },

    /**
     * 勾选行时响应
     */
    handleSelectionChangeField(val) {
      let multipleSelectionfieldName = [];
      if (val.length) {
        val.map((e) => {
          multipleSelectionfieldName.push(e.name);
        });
      }
      this.multipleSelectionfieldArray = val;
      this.multipleSelectionfieldName = multipleSelectionfieldName;
    },

    /**
     * 确定清除表单字段数据
     */
    async handleClearFieldData() {
      let multipleSelectionfieldName = this.multipleSelectionfieldName;
      if(multipleSelectionfieldName.length>0){
        try{
          await delMsg(this.$t('msg.confirm_clean'), this.$t('msg.tip'))
          this.btnLoading = true;
          const response = await handleClearFieldData(multipleSelectionfieldName, this.formId);
          this.btnLoading = false;
          if (response.data.errcode == 0) {
            this.handleClose();
            this.$message.success(this.$t('msg.clean_ss'));
          }
        }catch(e){
          console.log(e)
        }
      }else{
        this.$message.error(this.$t('msg.check_data'))
      }
      
    },
  }
}
</script>
<style lang='less' scoped>
</style>