<template>
  <a-modal
      destroy-on-close
      :visible.sync="dialogFormVisible"
      :maskClosable="true"
      :keyboard="false"
      @cancel="close"
      width="50%"
      :footer="false"
      @afterClose="close">
    <div slot="title">
      {{ $t('functional-analysis.top-btn.check-statistics') }}
    </div>
    <div>
      <a-row :gutter='24'>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item :label="$t('functional-analysis.top-btn.node-name')">
            <a-input
                allowClear
                :placeholder="$t('functional-analysis.top-btn.please-enter-node-name')"
                v-model="formData.nodeName"
            />
          </a-form-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item :label="$t('functional-analysis.top-btn.missing-type')">
            <a-select
                style="width: 100%"
                allowClear
                v-model="formData.missType"
                :placeholder="$t('functional-analysis.top-btn.please-select-missing-type')"
            >
              <a-select-option v-for="item in missTypeList" :key="item.key" :value="item.key">
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item class="tr" :label="'\xa0'">
            <a-button class="ml10" @click="reset">
              {{ $t('global-btn.reset') }}
            </a-button>
            <a-button class="ml10" @click="search" type="primary">
              {{ $t('global-btn.search') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </div>
    <div class="mt10" style="max-height:calc(80vh - 160)">
      <a-table
          :columns="tableColumns"
          :dataSource="tableData"
          :loading="loading"
          size="small"
          bordered
          :rowKey="(record, index) => {
            return index;
          }"
          :pagination="pagination"
          @change="handlePageChange">
        <template slot="nodeType" slot-scope="text, row">
          {{
            row.nodeType === '01' ? $t("functional-analysis.top-btn.recycle-bin.structure") :
                row.nodeType === '02' ? $t("functional-analysis.top-btn.recycle-bin.function") :
                    row.nodeType === '04' ? $t("functional-analysis.top-btn.recycle-bin.product-characteristics") :
                        row.nodeType === '05' ? $t("functional-analysis.top-btn.recycle-bin.requirements") :
                            row.nodeType === '06' ? $t("functional-analysis.top-btn.recycle-bin.failure") :
                                row.nodeType === '14' ? $t("functional-analysis.top-btn.recycle-bin.current-measures") :
                                    row.nodeType === '07' ? $t("functional-analysis.top-btn.recycle-bin.optimization-measures") :
                                        row.nodeType === '08' ? $t("functional-analysis.top-btn.recycle-bin.measures-group") :
                                            row.nodeType === '09' ? $t("functional-analysis.top-btn.recycle-bin.preventive-measures") :
                                                row.nodeType === '10' ? $t("functional-analysis.top-btn.recycle-bin.detection-measures") :
                                                    row.nodeType === '99' ? $t("functional-analysis.top-btn.recycle-bin.interface") : "--"
          }}
        </template>
        <template slot="nodeName" slot-scope="text, row">
            <span :class="getNodeClass(row)" @click="skipNodeName(row)">
              {{ row.nodeName }}
            </span>
        </template>
        <template slot="missType" slot-scope="text, row">
          {{
            row.missType === '01' ? $t("functional-analysis.top-btn.missing-functional-network") :
                row.missType === '02' ? $t("functional-analysis.top-btn.failure-network") :
                    row.missType === '03' ? $t("functional-analysis.top-btn.missing-sod-value") :
                        row.missType === '04' ? $t("functional-analysis.top-btn.dysfunction") :
                            row.missType === '05' ? $t("functional-analysis.top-btn.failure-loss") :
                                row.missType === '06' ? $t("functional-analysis.top-btn.high-risk-items") :
                                    row.missType === '07' ? $t("functional-analysis.top-btn.require-loss") : "--"
          }}
        </template>
      </a-table>
    </div>
    <div class="mt10 text-right">
      <a-button @click="close" size="default">
        {{ $t('global-btn.close') }}
      </a-button>
    </div>
  </a-modal>
</template>
<script>

export default {
  name: "CheckStatisticsModal",
  props: {
    showCheckStatisticsModal: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    showCheckStatisticsModal(val) {
      this.dialogFormVisible = val;
    },
  },
  components: {},
  data() {
    return {
      /** 模态框状态 */
      dialogFormVisible: false,
      /** 表头 */
      tableColumns: [
        {
          title: () => this.$t('research.serial-number'),
          width: 50,
          align: "center",
          customRender: (value, row, index) => {
            return (
                (this.pagination.current - 1) * this.pagination.pageSize + 1 + index
            );
          },
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.node-type'),
          width: 150,
          scopedSlots: {
            customRender: "nodeType"
          },
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.node-name'),
          width: 250,
          scopedSlots: {
            customRender: "nodeName"
          },
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.missing-type'),
          width: 150,
          scopedSlots: {
            customRender: "missType"
          },
          align: "center",
          ellipsis: true
        },
      ],
      /** 数据源 */
      tableData:[],
      /** 加载中 */
      loading: false,
      /** 下拉框 */
      formData: {
        nodeName: undefined,
        missType: undefined
      },
      /** 缺失类型下拉框 */
      missTypeList: [
        {key: '01', value: this.$t("functional-analysis.top-btn.missing-functional-network")},
        {key: '02', value: this.$t("functional-analysis.top-btn.failure-network")},
        {key: '03', value: this.$t("functional-analysis.top-btn.missing-sod-value")},
        {key: '04', value: this.$t("functional-analysis.top-btn.dysfunction")},
        {key: '05', value: this.$t("functional-analysis.top-btn.failure-loss")},
        {key: '06', value: this.$t("functional-analysis.top-btn.high-risk-items")},
        {key: '07', value: this.$t("functional-analysis.top-btn.require-loss")},
      ],
      pagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        showTotal: total => this.$t('global-constant.table.show-total', [total]), //用于显示数据总量和当前数据顺序
        total: 0 // 总条数
      },
    };
  },
  methods: {
    /**
     * 关闭
     */
    close() {
      this.$emit("closeCheckStatisticsModal");
      this.formData.nodeName = undefined;
      this.formData.missType = undefined;
    },

    /**
     * 重置
     */
    reset() {
      this.formData.nodeName = undefined;
      this.formData.missType = undefined;
      this.pagination.current = 1;
      this.search();
    },

    /**
     * 检查统计表分页
     */
    search() {
      let _this = this;
      _this.loading = true;
      _this.pagination.current = 1;
      let data = {
        fmeaId: _this.$store.getters.rfmeaId,
        nodeName: _this.formData.nodeName,
        missType: _this.formData.missType,
      };
      this.$api.getCheckStatisticsPage(data).then(res => {
        if (!res.flag) {
          this.$notification.error({ message: res.message });
        }
        _this.tableData = res.data || [];
      }).finally(() => {
        _this.loading = false;
      });
    },

    /**
     * 动态生成节点的Class，满足不同类型节点样式不一样
     * @param node 节点
     */
    getNodeClass(node) {
      let color = "node rightTreeNode";
      color += this.getNodeColor(node);
      return color;
    },

    /**
     * 取得节点颜色样式
     * @param node 节点
     */
    getNodeColor(node) {
      let color = " ";
      let obj = this.$store.getters.nodeTypeDict.color.filter(item => item.key === node.nodeType)[0]
      if (obj) color += obj.value;
      return color;
    },

    /**
     * 点击行跳转
     */
    skipNodeName(row) {
      this.close();
      this.$emit("ClickSkipStruTree", row.nodeType, row.struId, row.leftStruId)
    },
    /**
     * 分页
     */
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
  },
  destroyed() {
    this.close();
  },
};
</script>
<style lang="less">

</style>
