<template>
  <a-modal
      :title="$t('plan.correlate-pfmea.view-associated-fmea')"
      :visible="dialogFormVisible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      width="100%"
      destroy-on-close
      :footer="false"
      @afterClose="close">
    <div style="height: 100%">
      <a-col :span="24" class="boxlr">
        <a-form layout="vertical">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item :label="$t('plan.correlate-pfmea.pass-node-type')">
                <a-select v-model="queryParam.strucType"
                          :placeholder="$t('plan.correlate-pfmea.please-select-pass-node-type')"
                          @change="handleStrucType">
                  <a-select-option
                      v-for="(item, key) in strucTypeList"
                      :key="key"
                      :value="item.key">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item v-if="queryParam.strucType === '02'" :label="$t('plan.correlate-pfmea.function-name')">
                <a-input allowClear v-model="queryParam.functionName"
                         :placeholder="$t('plan.correlate-pfmea.please-enter-function-name')"/>
              </a-form-item>
              <a-form-item v-if="queryParam.strucType === '04'"
                           :label="$t('plan.correlate-pfmea.product-feature-name')">
                <a-input allowClear v-model="queryParam.functionName"
                         :placeholder="$t('plan.correlate-pfmea.please-enter-product-feature-name')"/>
              </a-form-item>
              <a-form-item v-if="queryParam.strucType === '06'" :label="$t('plan.correlate-pfmea.failure-name')">
                <a-input allowClear v-model="queryParam.functionName"
                         :placeholder="$t('plan.correlate-pfmea.please-enter-failure-name')"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item :label="'\xa0'">
                <a-button type @click="reset()">
                  {{ $t('global-btn.reset') }}
                </a-button>
                <a-button class="ml10" type="primary" @click="search">
                  {{ $t('global-btn.search') }}
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <a-row>
          <a-col :span="24" class="mt10">
            <a-table
                size="small"
                :pagination="pagination"
                :rowKey="(record, index) => { return index; }"
                bordered
                :scroll="{ x: scrollX ,y: 'calc(88vh - 440px)'}"
                :columns="columns"
                :dataSource="tableData"
                @change="handleTableChange"
                :loading="loading">
              <!-- 特性图标 -->
              <template slot="picFlag" slot-scope="text, record">
                <span v-if="record.explain">{{ record.explain }}</span>
                <img width='25' height='25' v-else-if="record.fileName" :src="baseUrl + '/DFMEA/file/' + record.fileName" />
              </template>
              <!-- 特性图标p -->
              <template slot="picFlagP" slot-scope="text, record">
                <span v-if="record.explainP">{{ record.explainP }}</span>
                <img width='25' height='25' v-else-if="record.fileNameP" :src="baseUrl + '/DFMEA/file/' + record.fileNameP" />
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-col>
    </div>
    <a-row class="mb_8" style="display: none;">
      <a-col :span="24"></a-col>
    </a-row>

  </a-modal>
</template>

<script>

export default {
  name: "CompareDFMEA",
  components: {
    // TaskForm,
    // DfmeaForm,
    // VersionDialog
  },
  props: {
    showCompareDFMEA: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    showCompareDFMEA(val) {
      this.dialogFormVisible = val;
    },
  },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      // 当前页
      pageNo: 1,
      // 每页显示的数据条数
      pageSize: 10,
      // 分页
      pagination: {
        // defaultPageSize: 10,
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('global-constant.table.show-total', [total]), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        // onChange: (page, pageSize) => self.changePage(page, pageSize), //点击页码事件
        total: 0 //总条数
      },
      columns: [],
      /** 表格宽度的固定值 */
      scrollX: 1,
      // 表头
      columnFunctions: [
        {
          title: 'DFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.structure-name'),
              width: 200,
              dataIndex: 'struName',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.function-name'),
              width: 200,
              align: 'center',
              dataIndex: 'name',
              customCell: this.getCellStyle,
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlag'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lname',
              ellipsis: true
            },
          ]
        },
        {
          title: 'PFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.process-name'),
              width: 200,
              dataIndex: 'struNameP',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.function-name'),
              width: 200,
              align: 'center',
              dataIndex: 'nameP',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlagP'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lnameP',
              ellipsis: true
            }
          ]
        }
      ],
      columnFeatures: [
        {
          title: 'DFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.structure-name'),
              width: 200,
              dataIndex: 'struName',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.product-feature-name'),
              width: 200,
              align: 'center',
              dataIndex: 'name',
              customCell: this.getCellStyle,
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlag'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lname',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.numerical-value'),
              width: 200,
              align: 'center',
              dataIndex: 'featureValue',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.unit'),
              width: 200,
              align: 'center',
              dataIndex: 'unit',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.tolerance'),
              width: 200,
              align: 'center',
              dataIndex: 'tolerance',
              ellipsis: true
            }
          ]
        },
        {
          title: 'PFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.process-name'),
              width: 200,
              dataIndex: 'struNameP',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.product-feature-name'),
              width: 200,
              align: 'center',
              dataIndex: 'nameP',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlagP'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lnameP',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.numerical-value'),
              width: 200,
              align: 'center',
              dataIndex: 'featureValueP',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.unit'),
              width: 150,
              align: 'center',
              dataIndex: 'unitP',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.tolerance'),
              width: 150,
              align: 'center',
              dataIndex: 'toleranceP',
              ellipsis: true
            }
          ]
        }
      ],
      columnFaults: [
        {
          title: 'DFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.structure-name'),
              width: 200,
              dataIndex: 'struName',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.failure-name'),
              width: 200,
              align: 'center',
              dataIndex: 'name',
              customCell: this.getCellStyle,
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlag'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lname',
              ellipsis: true
            },
            {
              title: 'S',
              width: 150,
              align: 'center',
              dataIndex: 'severityD',
              ellipsis: true
            }
          ]
        },
        {
          title: 'PFMEA',
          dataIndex: '',
          align: 'center',
          ellipsis: true,
          children: [
            {
              title: () => this.$t('plan.correlate-pfmea.process-name'),
              width: 200,
              dataIndex: 'struNameP',
              align: 'center',
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.failure-name'),
              width: 200,
              align: 'center',
              dataIndex: 'nameP',
              customCell: this.getCellStyle,
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-classification'),
              width: 200,
              align: 'center',
              scopedSlots: {customRender: 'picFlagP'},
              ellipsis: true
            },
            {
              title: () => this.$t('plan.correlate-pfmea.feature-class-name'),
              width: 200,
              align: 'center',
              dataIndex: 'lnameP',
              ellipsis: true
            },
            {
              title: 'S',
              width: 150,
              align: 'center',
              dataIndex: 'severityDP',
              ellipsis: true
            }
          ]
        }
      ],
      // 查询参数
      queryParam: {
        functionName: undefined,
        rfmeaId: undefined,
        strucType: undefined,
        projectSn: undefined,
        orgId: undefined,
        orgName: undefined
      },
      featureClassifyDict: [],
      tableData: [],
      // 节点类型字典
      strucTypeList: [
        {key: '02', value: this.$t('global-dict.function')},
        {key: '04', value: this.$t('global-dict.product-features')},
        {key: '06', value: this.$t('global-dict.failure')},
      ],
      // 参数存储
      fmeaId: '',
      baseUrl: this.$api.baseUrl === '/' ? 'http://localhost:8080' : this.$api.baseUrl,
    };
  },
  methods: {
    getCellStyle(record) {
      if (record.name != record.nameP && record.nameP != '' && record.nameP != undefined) {
        return {
          style: {
            'color': 'rgb(255,150,150)',
          },
        }
      }
    },
    // 重置
    reset() {
      this.queryParam.strucType = this.strucTypeList[0].key
      this.queryParam.functionName = ''
      this.pagination.current = 1
      this.pagination.pageNo = 1
      this.pagination.pageSize = 10
      this.pageNo = 1
      this.pageSize = 10
      this.getFmeaElementStru()
    },
    // 分页列表 - 点击分页中数字触发的方法
    handleTableChange(pagination) {
      this.pageNo = pagination.current
      this.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getFmeaElementStru()
    },
    // 搜索
    search() {
      this.pageNo = 1
      this.pageSize = this.pagination.pageSize
      this.pagination.current = 1
      this.getFmeaElementStru()
    },
    handleStrucTypeValue(val) {
      this.pageNo = 1
      this.pageSize = 10
      this.pagination.current = this.pageNo
      this.pagination.pageSize = this.pageSize
      this.queryParam.strucType = val
      this.queryParam.functionName = ''
      if (val === this.strucTypeList[1].key) {
        this.columns = this.columnFeatures;
        this.scrollX = 2700;
      } else if (val === this.strucTypeList[0].key) {
        this.columns = this.columnFunctions;
        this.scrollX = 800;
      } else if (val === this.strucTypeList[2].key) {
        this.columns = this.columnFaults;
        this.scrollX = 1900;
      }
    },
    // 类型下拉改变
    handleStrucType(val) {
      this.handleStrucTypeValue(val)
      this.getFmeaElementStru()
    },
    delCookie(name) {
      document.cookie = name + '=' + escape('') + ';expires=-1';
    },
    setCookie(name, value) {
      if (value) {
        var days = 1; //定义一天
        var exp = new Date();
        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
        // 写入Cookie, toGMTString将时间转换成字符串
        document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString;
      }
    },
    // 基本信息-项目编号模糊查询
    fpid(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    close() {
      this.$emit("closeCompareDFMEAModal");
    },
    searchStru() {
      this.removeHighRedNode()
      if (this.queryParam.struName) {
        this.initData.forEach(data => {
          if (data.name.indexOf(this.queryParam.struName) != -1) {
            this.setHighRedNode(data)
          }
        })
      }
    }
    ,
    /**
     * 获取相关联的详细的数据
     */
    getFmeaElementStru() {
      // 初始化数据
      this.loading = true
      let data = {
        fmeaId: this.$route.query.rfmeaId,
        rfmeaId: this.$route.query.rfmeaId,
        pfmeaId: this.queryParam.rfmeaId,
        struId: this.queryParam.struId,
        struTypeCode: this.queryParam.strucType,
        funcName: this.queryParam.functionName,
        type: 1,
        status: 2,
        compareStatus: 1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        classifyId: this.queryParam.classifyId
      }
      this.$api.getFmeaElementStru(data).then((res) => {
        this.tableData = res.data.data
        this.pagination.total = res.data.total || 0;
        this.loading = false
      })
    },
    /**
     * 初始化数据
     */
    init() {
      this.handleStrucType(this.strucTypeList[0].key)
    },
  },
  mounted() {
    this.fmeaId = this.$route.query.fmeaId ? this.$route.query.fmeaId : '';
  }
}
</script>
<style lang="less" scoped>
// 设置model 全屏
/deep/ .ant-modal {
  top: 0 !important;
}

// 设置model 全屏
/deep/ .ant-modal-content {
  height: calc(100vh);
}

// 不加上弹窗就会有滚动条;
/deep/ .ant-modal-wrap {
  overflow: hidden !important
}
/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden!important;
  margin-bottom: 0!important;
  padding-right: 8px;
  background: rgb(250, 250, 250);
}
</style>
