<template v-if="show">

  <div>
    <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">
            <a-radio-group v-model="flag.status" class="checkBoxGroup" @change="deleteRdfm" :disabled="!$api.btnPms">
              <a-radio value="0">{{ $t('functional-analysis.top-modal.manual tagging') }}</a-radio>
              <a-radio class="radio" value="1">{{ $t('functional-analysis.top-modal.automatic tagging') }}</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">

        <!--        <template v-slot:picFlag='text, record'>-->
        <!--          <span v-if="record.classifyType === '2'">{{ record.lexplain }}</span>-->
        <!--          <img width='25' height='25' v-else :src=" this.$api.baseUrl + '/DFMEA/file/' + record.fileName" />-->
        <!--        </template>-->
        <!--       操作-->
        <template v-slot:action='text, record'>
          <a
              href="javascript:;"
              @click="update(record)"
              :disabled="!$api.btnPms"
              class="operate-btn"
          >
            <a-tooltip :title="$t('functional-analysis.top-modal.update')">
              <i class="iconfont iconicon-bainji"></i>
            </a-tooltip>
          </a>

        </template>
      </a-table>
      <div class="mt10 text-right">
        <a-button @click="mark" :disabled="!$api.btnPms">
          {{ $t('functional-analysis.top-modal.flush tagging') }}
        </a-button>
      </div>
    </a-form>

    <EditPropertyTagged :queryParam="modalData" ref="visible"></EditPropertyTagged>
  </div>

</template>

<script>
import EditPropertyTagged from "@/views/fmeaTree/components/TopBtnModal/components/EditPropertyTagged";

export default {
  inject: ['reload'],
  name: "PropertyTagged",
  components: {EditPropertyTagged},
  data() {
    return {
      tableData: [],
      loading: false,
      show: true,
      flag: {
        status: ''
      },
      propDetailData: {},
      pductClassifyId: '',
      //模态窗的值
      modalData: [],
      // 表头
      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,
        },
        {
          title: () => this.$t('functional-analysis.top-modal.S start'),
          dataIndex: 'severityMax',
          width: 125,
          align: 'center',
          // ellipsis: true,
        },
        {
          title: () => this.$t('functional-analysis.top-modal.S end'),
          dataIndex: 'severityMin',
          width: 125,
          align: 'center',
          // ellipsis: true,
        },
        {
          title: () => this.$t('functional-analysis.top-modal.O start'),
          dataIndex: 'occurrenceMax',
          width: 125,
          align: 'center',
          // ellipsis: true,
        },
        {
          title: () => this.$t('functional-analysis.top-modal.O end'),
          dataIndex: 'occurrenceMin',
          width: 125,
          align: 'center',
          // ellipsis: true,
        },
        {
          title: () => this.$t('functional-analysis.top-modal.operate'),
          // width: 100,
          align: "center",
          scopedSlots: {
            customRender: "action"
          },
          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';
              if (res.data && res.data.state == 1) {
                this.flag.status = '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});
            }
          });
        } else {
          this.$notification.error({message: res.message});
        }
      });
    },
    update(record) {
      this.$refs.visible.showModal = true;
      this.$refs.visible.queryParam = record;
    },
    //改为手动配置删除数据
    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.clean-all-configuration'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onOk() {
          _that.$api.deleteRPClassifyState(data).then(res => {
            if (res.flag) {
              _that.confirm();
            } else {
              _that.$notification.error({message: res.message});
            }
          });
        },
        onCancel() {
          if (_that.flag.status == '0') {
            _that.flag.status = '1'
          } else {
            _that.flag.status = '0'
          }
        }
      });
    },
    cancel() {
      this.$refs.visible.showModal = false;
    },
    closeModal() {
      this.$emit("closeModal");
    },
    //自动标记
    mark() {
      var data = {
        fmeaId: this.$route.query.rfmeaId
      };
      this.$api.markRPClassifyState(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message, 1);
          this.$emit("closeModal");
          // 初始化右侧树
          this.initRightTree();
        } else {
          this.$notification.error({message: res.message});
        }
      })
    },
    /**
     * 初始化右侧树
     */
    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.$message.success(res.message, 1);
        } else {
          this.$notification.error({message: res.message});
        }
      });
      this.initData();
    }
  },
  mounted() {
    this.initData();
  }
}
</script>

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

.ml10 {
  margin-left: 500px;
}

</style>
