<template v-if="show">

  <div>
    <a-spin :spinning="loading">
    <a-form layout="vertical" class="form">
      <a-row :gutter="24">
        <a-col :xl="24" :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item class="formItem" :label="$t('functional-analysis.top-modal.whether-enable-automatic-marking')">
            <a-radio-group v-model="flag.status" class="checkBoxGroup" :disabled="!$api.btnPms">
              <a-radio class="radio" value="1">{{ $t('functional-analysis.top-modal.yes') }}</a-radio>
              <a-radio value="0">{{ $t('functional-analysis.top-modal.no') }}</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-table
          ref="tableRef"
          :loading="loading"
          bordered
          :columns="tableColumns"
          :rowKey="(record, index) => {return index;}"
          size="small"
          :dataSource="tableData"
          :scroll="{ y: 'calc(88vh - 400px)' }"
          :pagination="false">
      </a-table>
      <div class="mt10 text-right">
        <a-button @click="mark" :disabled="!$api.btnPms">
          {{ $t('functional-analysis.top-modal.flush tagging') }}
        </a-button>
        <!-- 确定-->
        <a-button @click="ascertain" class="ml-2" type='primary' :disabled="!$api.btnPms">
          {{ $t('functional-analysis.top-modal.confirm') }}
        </a-button>
        <!-- 取消-->
        <a-button @click="countermand" class="ml-2">
          {{ $t('functional-analysis.top-modal.cancel') }}
        </a-button>
      </div>
    </a-form>
    </a-spin>
  </div>

</template>

<script>

export default {
  inject: ['reload'],
  name: "PropertyTagged",
  data() {
    return {
      tableData: [],
      loading: false,
      show: true,
      flag: {
        originalStatus: '',// 是否开启自动标记原始值
        status: ''
      },
      propDetailData: {},
      pductClassifyId: '',
      // 表头
      tableColumns: [
        {
          title: () => this.$t('functional-analysis.property-modal.icon/mark'),
          width: 100,
          align: 'center',
          // scopedSlots: {customRender: 'picFlag'},
          customRender: (text, row, index) => {
            /** 1：图标，2：标识 */
            if (row.classifyType === "1") {
              let url = this.$api.baseUrl + '/DFMEA/file/' + row.fileName;
              text = <img width="25" height="25" src={url} alt=""/>;
            } else if (row.classifyType === "2") {
              text = row.lexplain;
            }
            if (row.detailId) return text;
            return {
              children: text,
              attrs: {
                colSpan: 3,
              },
            };
          },
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.property-modal.name'),
          dataIndex: 'lname',
          align: 'center',
          width: 125,
          ellipsis: true,
        },
        {
          title: () => this.$t('functional-analysis.property-modal.note'),
          dataIndex: 'ldescription',
          align: 'center',
          width: 125,
          ellipsis: true,
        },
        // s值范围
        {
          title: () => this.$t('functional-analysis.top-modal.S-scope'),
          customRender: (text, row, index) => {
            if (row.sstart && row.send){
              return row.sstart + '~' + row.send;
            } else {
              return '~';
            }
          },
          align: 'center',
          width: 125,
          ellipsis: true,
        },
        // o值范围
        {
          title: () => this.$t('functional-analysis.top-modal.O-scope'),
          customRender: (text, row, index) => {
            if (row.ostart && row.oend){
              return row.ostart + '~' + row.oend;
            } else {
              return '~';
            }
          },
          align: 'center',
          width: 125,
          ellipsis: true,
        },
        // d值范围
        {
          title: () => this.$t('functional-analysis.top-modal.D-scope'),
          customRender: (text, row, index) => {
            if (row.dstart && row.dend){
              return row.dstart + '~' + row.dend;
            } else {
              return '~';
            }
          },
          align: 'center',
          width: 125,
          ellipsis: true,
        }
      ],
    }
  },
  methods: {
    // 表格渲染
    initData() {
      this.loading = true;
      let data = {
        fmeaId: this.$route.query.rfmeaId,
      };
      this.$api.getCharacteristicType(data).then(res => {
        if (res.flag) {
          var data1 = {
            fmeaId: this.$route.query.rfmeaId,
            pductClassifyId: res.data.defaultPductClassifyId
          };
          this.pductClassifyId = res.data.defaultPductClassifyId;
          this.$api.getRPClassifyState(data1).then(res => {
            if (res.flag) {
              this.flag.status = '0';
              this.flag.originalStatus = '0';
              if (res.data && res.data.state == 1) {
                this.flag.status = '1';
                this.flag.originalStatus = '1';
              }
            } else {
              this.$notification.error({message: res.message});
            }
          })
          this.$api.getRPClassifyList(data1).then(res => {
            if (res.flag) {
              this.tableData = res.data;
              this.loading = false;
            } else {
              this.$notification.error({message: res.message});
              this.loading = false;
            }
          });
        } else {
          this.$notification.error({message: res.message});
          this.loading = false;
        }
      });
    },
    // 特性自动标记弹窗--确定
    ascertain() {
      // 判断是否开启自动标记是否更改
      if (this.flag.status === this.flag.originalStatus) {
        // 未作任何修改直接关闭弹窗
        this.countermand();
      } else {
        // 开启警示弹窗
        this.deleteRdfm();
      }
    },
    // 特性自动标记弹窗--取消
    countermand() {
      // 数据恢复默认值
      this.tableData = [];
      this.loading = false;
      this.show = true;
      this.flag = {
        originalStatus: '',// 是否开启自动标记原始值
        status: ''
      };
      this.propDetailData = {};
      this.pductClassifyId = '';
      // 关闭弹窗
      this.$emit("closeModal");
      // 初始化右侧树
      this.initRightTree();
    },
    // 是否开启自动标记修改删除数据
    deleteRdfm() {
      let _that = this;
      var data = {
        fmeaId: this.$route.query.rfmeaId,
        pductClassifyId: this.pductClassifyId
      };
      _that.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.modify-configuration'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onOk() {
          _that.loading = true;
          _that.$api.deleteRPClassifyState(data).then(res => {
            if (res.flag) {
              _that.confirm();
            } else {
              _that.$notification.error({message: res.message});
              _that.loading = false;
            }
          });
        },
        onCancel() {}
      });
    },
    closeModal() {
      this.$emit("closeModal");
    },
    //自动标记
    mark() {
      this.loading = true;
      var data = {
        fmeaId: this.$route.query.rfmeaId
      };
      this.$api.markRPClassifyState(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message, 1);
          // 关闭弹窗
          this.countermand();
        } else {
          this.$notification.error({message: res.message});
          this.loading = false;
        }
      })
    },
    /**
     * 初始化右侧树
     */
    initRightTree() {
      this.$emit("initRightTree");
    },
    confirm() {
      var data = {
        fmeaId: this.$route.query.rfmeaId,
        pductClassifyId: this.pductClassifyId,
        state: this.flag.status
      };
      this.$api.saveRPClassifyState(data).then(res => {
        if (res.flag) {
          this.mark();
        } else {
          this.$notification.error({message: res.message});
          this.loading = false;
        }
      });
    }
  },
  mounted() {
    this.initData();
  }
}
</script>

<style scoped>
.radio {
  margin-left: 10px;
}

.ml10 {
  margin-left: 500px;
}
/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding-right: 3px;
  background: rgb(250, 250, 250);
}
</style>
