<template>
  <a-drawer
      :title="$t('research.historical-failure-case-analysis')"
      :visible="showViewDrawer"
      width="100%"
      @close="handleClose">
    <a-card class="mb_8">
      <a-form v-bind='formItemLayout'>
        <a-form-item :label="$t('research.problem-number')">
          {{ problemNo }}
        </a-form-item>
        <a-form-item :label="$t('research.problem-title')">
          {{ problemTitle }}
        </a-form-item>
        <a-form-item :label="$t('research.problem-description')">
          {{ problemDes }}
        </a-form-item>
        <a-form-item :label="$t('research.root-cause')">
          {{ failCause }}
        </a-form-item>
        <a-form-item :label="$t('research.solution')">
          {{ solveProposal }}
        </a-form-item>
      </a-form>
    </a-card>
    <a-card class="table-wrapper">
      <a-table
          :columns="tableColumns"
          bordered
          :dataSource="tableData"
          size="small"
          :rowKey="(record, index) => {
            return index;
          }"
          :scroll="{ x: 1000 }"
          :pagination="pagination"
          @change="handlePageChange">
          <!-- 是否适用 -->
        <template slot="isApply" slot-scope="text, record">
            <span>
              {{
                record.isApply === '1'
                    ? $t('research.apply')
                    : record.isApply === '0'
                    ? $t('research.not-apply')
                    : "-"
              }}
            </span>
        </template>
        <!-- 不适用原因 -->
				<template slot='notApplyReason' slot-scope='text, record'>
					<span>{{ record.notApplyReason === '' || record.notApplyReason === null ? '/' : record.notApplyReason }}</span>
				</template>
        <template slot="index" slot-scope="text, record, index">
            <span>
              {{ (pagination.pageNo - 1) * pagination.pageSize + index + 1 }}
            </span>
        </template>
      </a-table>
    </a-card>
    <div class="operation-wrapper mt10 tr">
      <a-button type="primary" @click="handleClose">
        {{ $t('global-btn.return') }}
      </a-button>
    </div>
  </a-drawer>
</template>
<script>

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    case: {
      type: Object,
      default: () => {
      }
    },
    showViewDrawer: {
      type: Boolean,
      default: false
    },
    failExpId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 3},
          xl: {span: 3},
          lg: {span: 4},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        },
        wrapperCol: {
          xxl: {span: 21},
          xl: {span: 21},
          lg: {span: 20},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      problemNo: "",
      problemTitle: "",
      problemDes: "",
      failCause: "",
      solveProposal: "",
      tableColumns: [
        {
          title: () => this.$t('research.serial-number'),
          width: 80,
          align: "center",
          scopedSlots: {
            customRender: "index"
          },
          ellipsis: true
        },
        // 编号
        {
          title: () => this.$t('research.fmea-number'),
          width: 300,
          dataIndex: "fmeaCode",
          align: "center",
          ellipsis: true
        },
        // 版本
				{
					title: this.$t('plan.citation-family-dfmea.version'),
					dataIndex: 'version',
					align: 'center',
					// ellipsis: true,
				},
				// 状态
				{
					title: this.$t('functional-analysis.property-modal.status'),
					dataIndex: 'status',
					align: 'center',
					// ellipsis: true,
				},
        // 是否适用
        {
          title: () => this.$t('research.is-it-applicable'),
          dataIndex: "isApply",
          scopedSlots: {
            customRender: "isApply"
          },
          align: "center",
          ellipsis: true
        },
        // 不适用原因
				{
					title: this.$t('research.reason-not-applicable'),
					dataIndex: 'notApplyReason',
					align: 'center',
					scopedSlots: {
						customRender: 'notApplyReason'
					}
					// ellipsis: true,
				},
        // 失效
        {
          title: () => this.$t('research.failure'),
          dataIndex: "faultName",
          align: "center",
          width: 120,
          ellipsis: true
        },
        // 功能
        {
          title: () => this.$t('research.function'),
          dataIndex: "funName",
          align: "center",
          width: 120,
          ellipsis: true
        },
        // 结构
        {
          title: () => this.$t('research.structure'),
          dataIndex: "struName",
          align: "center",
          width: 120,
          ellipsis: true
        }
      ],
      tableData: [],
      // 分页
      pagination: {
        // defaultPageSize: 10,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        failExpId: "",
        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 //总条数
      },
      pageNo: 1,
      pageSize: 10
    };
  },
  computed: {},
  methods: {
    // 数据渲染
    historyfailDetail(failExpId) {
      this.pagination.failExpId = failExpId;
      let data = {
        historyFailId: failExpId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      this.$api.historyfailDetail(data).then((res) => {
        if (res.flag) {
          this.problemNo = res.data.issueNo;
          this.problemTitle = res.data.issueTitle;
          this.problemDes = res.data.descriptions;
          this.solveProposal = res.data.solution;
          this.failCause = res.data.rootcause;
        } else {
          this.$message.error(res.message, 1);
        }
      });
      this.$api.getHistoryFailDetailPage(data).then((res) => {
        if (res.flag) {
          this.tableData = res.data.data;
          this.pagination.total = res.data.total || 0;
        } else {
          this.$message.error(res.message, 1);
        }
      });
    },

    // 表格 - 点击分页中数字触发的方法
    handlePageChange(pagination) {
      this.pageSize = pagination.pageSize;
      this.pageNo = pagination.current;
      this.historyfailDetail(this.pagination.failExpId);
    },
    handleClose() {
      //this.$parent.showViewDrawer = false;
      this.$emit('closeDrawer')
    }
  }
};
</script>
<style lang="less">
.historyCase-view-drawer {
  .ant-form-item-label {
    width: 135px;
  }

  .table-wrapper {
    margin-bottom: 100px;
  }

  .operation-wrapper {
    z-index: 99;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 16px;
    background: #fff;
    text-align: right;

    button {
      margin-left: 16px;
    }
  }
}
</style>
