<template>
  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button v-if="$auth('repair-application-forms-approve') && DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ACCEPTANCE === model.status" style="margin-left: 8px" type="primary" @click="handleApprove()">验收</a-button>
          <a-button v-if="$auth('repair-application-forms-reback') && DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ACCEPTANCE === model.status" style="margin-left: 8px" type="danger" @click="handleReturn()">驳回</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <a-layout>
      <a-layout-content style="background-color: rgb(255, 255, 255)">
        <a-divider orientation="left">报修详情</a-divider>
        <detail-list title="" :col="3">
          <detail-list-item term="报修单号">{{ model.no }}</detail-list-item>
          <detail-list-item term="设备名称">{{ model.sbName }}</detail-list-item>
          <detail-list-item term="使用位置">{{ model.sbCph }}</detail-list-item>
          <!--<detail-list-item term="部件名称">{{ model.partName }}</detail-list-item>-->
          <detail-list-item term="是否停机">{{ BaseTool.Object.getField(needStopMap,model.needStop) }}</detail-list-item>
          <detail-list-item term="报修人">{{ model.userName }}</detail-list-item>
          <detail-list-item term="报修来源">{{ BaseTool.Object.getField(this.sourceMap, model.source) }}</detail-list-item>
          <detail-list-item term="紧急等级"><badge :text="BaseTool.Object.getField(levelMap,model.level)" :status="DictCache.COLOR.REPAIR_APPLICATION_FORM_LEVEL[model.applicationLevel]"/></detail-list-item>
          <detail-list-item term="报修时间">{{ model.applyTime }}</detail-list-item>
          <detail-list-item term="报修状态"><badge :text="BaseTool.Object.getField(statusMap,model.status)" :status="DictCache.COLOR.REPAIR_APPLICATION_FORM_STATUS[model.status]"/></detail-list-item>
        </detail-list>
        <detail-list title="" :col="1">
          <!--<detail-list-item term="故障描述">{{ BaseTool.Object.getField(this.descripitionMap, model.content) }}</detail-list-item>-->
          <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
        </detail-list>
        <detail-list title="维修图片：" :col="6">
          <upload-image-detail :images-list="model.repairFileList"/>
        </detail-list>
        <a-divider orientation="left">维修详情</a-divider>
        <detail-list title="" :col="3">
          <detail-list-item term="故障类别">{{ model.repairErrorTypeName }}</detail-list-item>
          <detail-list-item term="维修开始时间">{{ model.repairStartTime }}</detail-list-item>
          <detail-list-item term="维修结束时间">{{ model.repairEndTime }}</detail-list-item>
          <detail-list-item term="维修耗时">{{ model.repairMinutes }}</detail-list-item>
          <detail-list-item term="维修人员">{{ model.repairUserName }}</detail-list-item>
          <!--<detail-list-item term="维修次数">{{ model.repairTimes }}</detail-list-item>-->
        </detail-list>
        <detail-list title="" :col="1">
          <detail-list-item term="维修描述">{{ model.repairContent }}</detail-list-item>
        </detail-list>
        <detail-list title="维修图片：" :col="6">
          <upload-image-detail :images-list="model.repairFileList"/>
        </detail-list>
        <a-divider v-if="dispatchList != null" orientation="left">转派详情</a-divider>
        <detail-list v-for="item in dispatchList" title="" :col="3">
          <detail-list-item term="转派人">{{ item.username }}</detail-list-item>
          <detail-list-item term="转派时间">{{ item.time }}</detail-list-item>
          <detail-list-item term="转派备注">{{ item.remark }}</detail-list-item>
        </detail-list>
        <a-divider orientation="left">验收详情</a-divider>
        <detail-list title="" :col="3">
          <detail-list-item term="验收开始时间">{{ model.checkStartTime }}</detail-list-item>
          <detail-list-item term="验收结束时间">{{ model.checkEndTime }}</detail-list-item>
          <detail-list-item term="验收人员">{{ model.checkUserName }}</detail-list-item>
          <detail-list-item term="验收描述">{{ model.checkContent }}</detail-list-item>
        </detail-list>
        <detail-list title="验收图片：" :col="6">
          <upload-image-detail :images-list="model.checkFileList"/>
        </detail-list>
      </a-layout-content>
      <a-layout-sider style="background-color: rgb(255, 255, 255)">
        <div style="margin-top: 30px;margin-left: 30px;">
          <a-steps progress-dot :current="6" direction="vertical" >
            <a-step title="报修时间:" :description="''+model.applyTime?model.applyTime:''" />
            <a-step title="维修开始时间:" :description="''+model.repairStartTime?model.repairStartTime:''" />
            <a-step title="维修结束时间:" :description="''+model.repairEndTime?model.repairEndTime:''" />
            <a-step title="验收开始时间:" :description="''+model.checkStartTime?model.checkStartTime:''" />
            <a-step title="验收结束时间:" :description="''+model.checkEndTime?model.checkEndTime:''" />
          </a-steps>
        </div>
      </a-layout-sider>
    </a-layout>
    <title-divider title="维修项目" width="90px"></title-divider>
    <div class="table-operator" v-if="$auth('repair-application-forms-finish') && ( DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.PROCESSING === model.status || DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.REBACK === model.status)">
    </div>
    <a-table
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      rowKey="id">
    </a-table>
    <title-divider title="配件清单" width="90px"></title-divider>
    <div class="table-operator" v-if="$auth('repair-application-forms-finish') && ( DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.PROCESSING === model.status || DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.REBACK === model.status)">
    </div>
    <a-table
      :data-source="dataSpare"
      :columns="columnsSpare"
      tableLayout="auto"
      rowKey="id">

    </a-table>
    <!--<q-tabs :activeKey="activeKey" @change="changeTab">
      <q-tab-pane key="a" tab="配件更换">
        <spare-part-used-select-table :type="1" :table-params="{sbId: model.sbId, modelId: model.modelId, repairId: model.id}" ref="sparePartUsedSelectTable"/>
      </q-tab-pane>
      <q-tab-pane key="b" tab="备件领用">
        <spare-pick-form-select-table :type="1" :table-params="{repairId: model.id, repairNo: model.no}" ref="sparePickFormSelectTable"/>
      </q-tab-pane>
    </q-tabs>
    <finish-form ref="finishForm" @ok="handleOk" />
    <dispatch-form ref="dispatchForm" @ok="handleCancel" />-->
    <check-form ref="checkForm" @ok="handleOk" />
  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { fetchRepairApplicationForm, approve, receive } from '@/api/repair/application-form'
import CheckForm from './CheckForm'
import FinishForm from './FinishForm'
import DispatchForm from './DispatchForm'
import SparePartUsedSelectTable from '@/views/sqarepartmanage/sparepartused/modules/SparePartUsedSelectTable'
import SparePickFormSelectTable from '@/views/store/sparepickform/modules/SparePickFormSelectTable'
import { selectSparePartUsedListByRepairId } from '@/api/sqarepartmanage/sparepartused'
import { selectRepairProjectListByRepairId } from '@/api/repair/repairprojectrelation'
const DetailListItem = DetailList.Item

export default {
  name: 'RepairApplicationFormDetail',
  components: {
    CheckForm,
    DetailList,
    DetailListItem,
    FinishForm,
    DispatchForm,
    SparePartUsedSelectTable,
    SparePickFormSelectTable
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      needStopMap: {},
      dispatchList: [],
      activeKey: 'a',
      visible: false,
      // 下拉框map
      sourceMap: {},
      descripitionMap: {},
      levelMap: {},
      statusMap: {},
      repairProjectMap: {},
      repairTechnologyMap: {},
      data: [],
      dataSpare: [],
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            return `${index + 1}`
          }
        },
        {
          title: '编码',
          dataIndex: 'no'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '维修类别',
          dataIndex: 'type',
          customRender: (text, record, index) => {
            return this.BaseTool.Object.getField(this.repairProjectMap, text)
          }
        },
        {
          title: '维修工艺',
          dataIndex: 'technology',
          customRender: (text, record, index) => {
            return this.BaseTool.Object.getField(this.repairTechnologyMap, text)
          }
        },
        {
          title: '标准工时',
          dataIndex: 'standardHours'
        },
        {
          title: '标准费用',
          dataIndex: 'standardMoney'
        },
        {
          title: '考核工时',
          dataIndex: 'checkHours'
        }
      ],
      columnsSpare: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            return `${index + 1}`
          }
        },
        {
          title: '备件名称',
          dataIndex: 'spareId',
          customRender: (text, record, index) => {
            return record.spareName
          }
        },
        {
          title: '数量',
          dataIndex: 'num'
        },
        {
          title: '价格',
          dataIndex: 'price'
        },
        {
          title: '总价',
          dataIndex: 'totalPrice'
        }
      ],
      model: {
        'id': null,
        'sbId': null,
        'partId': null,
        'repairUserId': null,
        'needStop': null,
        'no': null,
        'source': null,
        'applyTime': null,
        'level': null,
        'content': null,
        'status': null,
        'remark': null,
        'updateTime': null,
        'createdUserId': null,
        'updateUserId': null,
        'createdUserName': null,
        'sbName': null,
        'partName': null,
        'updateUserName': null,
        'repairFormVO': null,
        'repairCheckVO': null
      }
    }
  },
  created () {
    // 下拉框map
    this.sourceMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE)
    this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_LEVEL)
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
    this.statusRepairMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_FORM_STATUS)
    this.statusCheckMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_CHECK_STATUS)
    this.needStopMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    this.repairProjectMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_PROJECT_TYPE)
    this.repairTechnologyMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_TECHNOLOGY_TYPE)
    this.descripitionMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIRE_ACTION)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modalTitle = '详情'
      this.model = record
      this.dispatchList = JSON.parse(record.repairDispatchList)
      selectRepairProjectListByRepairId({ id: record.id }).then(res => {
        this.data = res.data
      })
      selectSparePartUsedListByRepairId({ id: record.id }).then(res => {
        this.dataSpare = res.data
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok')
    },
    receive () {
      receive(this.model).then(() => {
        this.$message.info('任务接收成功，请及时维修')
        this.handleOk()
      })
    },
    handleApprove () {
      approve(this.model).then(() => {
        this.$message.info('操作成功')
        this.handleOk()
      })
    },
    handleReturn () {
      console.log('11111')
      const modal = this.$refs.checkForm
      modal.base(this.model)
    },
    handleOk () {
      fetchRepairApplicationForm({ id: this.model.id }).then(res => {
        this.model = res.data
        this.dispatchList = JSON.parse(this.model.repairDispatchList)
      })
    },
    handleFinish () {
      const modal = this.$refs.finishForm
      modal.base(this.model)
    },
    handleDispatch () {
      const modal = this.$refs.dispatchForm
      modal.base(this.model)
    },
    changeTab (activeKey) {
      this.activeKey = activeKey
      if (this.activeKey === 'a' && this.BaseTool.Object.isNotBlank(this.$refs.sparePartUsedSelectTable)) {
        const modal = this.$refs.sparePartUsedSelectTable
        modal.handleOk()
        return
      }
      if (this.activeKey === 'b' && this.BaseTool.Object.isNotBlank(this.$refs.sparePickFormSelectTable)) {
        const modal = this.$refs.sparePickFormSelectTable
        modal.handleOk()
      }
    }
  }
}
</script>
