<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="设备台账" key="1">
            <a-col :span="12">
              <pie title="故障率统计" :height="250" :dataSource="countSource1"/>
            </a-col>
            <a-col :span="12">
                <a-card title="统计信息" :bordered="false" style="width: 300px">
                  <a-list-item>
                    新购时间:{{"&nbsp&nbsp" + buyTime}}
                  </a-list-item>
                  <a-list-item>
                    投用时间:{{"&nbsp&nbsp" + unsealUpTime}}
                  </a-list-item>
                  <a-list-item>
                    总使用时间:{{"&nbsp&nbsp" + useTime + "天"}}
                  </a-list-item>
                </a-card>
            </a-col>
            <a-col :span="24">
              <a-list size="large" >
                <a-list-item>
                  设备名称:{{"&nbsp&nbsp" + deviceName}}
                </a-list-item>
                <a-list-item>
                  设备编号:{{"&nbsp&nbsp" + deviceCode}}
                </a-list-item>
                <a-list-item>
                  规格型号:{{"&nbsp&nbsp" + typeId}}
                </a-list-item>
                <a-list-item>
                  供应商:{{"&nbsp&nbsp" + supplierId}}
                </a-list-item>
                <a-list-item>
                  负责人:{{"&nbsp&nbsp" + directorId}}
                </a-list-item>
                <a-list-item>
                  安装地点:{{"&nbsp&nbsp" + location}}
                </a-list-item>
                <a-list-item>
                  价格:{{"&nbsp&nbsp" + price}}
                </a-list-item>
              </a-list>
            </a-col>
            <a-col :span="12">
              <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-image-upload v-model="img" :isMultiple="false"></j-image-upload>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="二维码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-image-upload v-model="code" :isMultiple="false"></j-image-upload>
              </a-form-item>
            </a-col>
          </a-tab-pane>
          <a-tab-pane tab="维修信息记录" key="2">
            <a-col :span="24">
              <a-card title="维修记录">
                <!--          <template #cover>-->
                <!--            <img-->
                <!--              alt="example"-->
                <!--              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"-->
                <!--            />-->
                <!--          </template>-->
                <a-col :span="12">
                  <a-list-item>
                    总点检次数:{{"&nbsp&nbsp" + planTime}}
                  </a-list-item>
                </a-col>
                <a-col :span="12">
                  <a-list-item>
                    总维修次数:{{"&nbsp&nbsp" + repairTime}}
                  </a-list-item>
                </a-col>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card title="最后一次维修故障详细信息" >
                <a-col :span="24" >
                  <a-list size="large" >
                    <a-list-item>
                      设备名称:{{"&nbsp&nbsp" + deviceName}}
                    </a-list-item>
                    <a-list-item>
                      设备编号:{{"&nbsp&nbsp" + deviceCode}}
                    </a-list-item>
                    <a-list-item>
                      规格型号:{{"&nbsp&nbsp" + typeId}}
                    </a-list-item>
                    <a-list-item>
                      提交人:{{"&nbsp&nbsp" + repairSubmitId}}
                    </a-list-item>
                    <a-list-item>
                      提交时间:{{"&nbsp&nbsp" + repairSubmitTime}}
                    </a-list-item>
                    <a-list-item>
                      现象描述:{{"&nbsp&nbsp" + description}}
                    </a-list-item>
<!--                    <a-list-item>-->
<!--                      故障等级:{{"&nbsp&nbsp" + repairGrade}}-->
<!--                    </a-list-item>-->
<!--                    <a-list-item>-->
<!--                      故障类型:{{"&nbsp&nbsp" + repairType}}-->
<!--                    </a-list-item>-->
                    <a-list-item>
                      故障原因:{{"&nbsp&nbsp" + reason}}
                    </a-list-item>
                    <a-list-item>
                      维修结果:{{"&nbsp&nbsp" + repairResult}}
                    </a-list-item>
                    <a-list-item>
                      维修班组:{{"&nbsp&nbsp" + orgName}}
                    </a-list-item>
                    <a-list-item>
                      验收时间:{{"&nbsp&nbsp" + acceptTime}}
                    </a-list-item>
                  </a-list>
                </a-col>
              </a-card>
            </a-col>
          </a-tab-pane>
          <a-tab-pane tab="维保信息记录" key="3">
            <a-card title="最后一次维保信息记录" >
            <a-col :span="24">
              <a-list-item>
                总维保次数:{{"&nbsp&nbsp" + maintenanceTime}}
              </a-list-item>
            </a-col>
              <a-col :span="24" >
                <a-list size="large" >
                  <a-list-item>
                    设备名称:{{"&nbsp&nbsp" + deviceName}}
                  </a-list-item>
                  <a-list-item>
                    设备编号:{{"&nbsp&nbsp" + deviceCode}}
                  </a-list-item>
                  <a-list-item>
                    规格型号:{{"&nbsp&nbsp" + typeId}}
                  </a-list-item>
                  <a-list-item>
                    提交人:{{"&nbsp&nbsp" + submitId}}
                  </a-list-item>
                  <a-list-item>
                    提交时间:{{"&nbsp&nbsp" + submitTime}}
                  </a-list-item>
                  <a-list-item>
                    保养人:{{"&nbsp&nbsp" + assignerId}}
                  </a-list-item>
                  <a-list-item>
                    维保内容:{{"&nbsp&nbsp" + maintenanceRecord}}
                  </a-list-item>
                  <a-list-item>
                    验收人:{{"&nbsp&nbsp" + inspector}}
                  </a-list-item>
                </a-list>
              </a-col>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>

    </a-row>
  </j-modal>
</template>

<script>

  import JSelectUserByDep from '@comp/jeecgbiz/JSelectUserByDep'
  import pick from 'lodash.pick'
  import { getAction, httpAction } from '@api/manage'
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
  import Pie from '@comp/chart/Pie'

  export default {
    name: 'BuDeviceLifeCircleRepairModal',
    components: {
      JSelectUserByDep,
      JSelectDevice,
      Pie,
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        countSource1:[],
        title:'',
        width:800,
        visible: false,
        disableSubmit: true,
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/repair/buRepairRecord/add",
          edit: "/repair/buRepairRecord/edit",
          queryById: "/repair/buRepairRecord/queryById",
          getTimesByDeviceId: "/repair/buRepairRecord/getTimes",
          getRateByDeviceId: "/repair/buRepairRecord/getFaultRate",
          getDeviceById: "/device/buDeviceLifeCircle/getDeviceDataById",
          getTimeByLifeCircle: "/device/buDeviceLifeCircle/getTimeByDeviceId",
          getMaintenanceById: "/device/buDeviceLifeCircle/maintenanceTimeByDeviceId",
          getEndRepair: "/repair/buRepairRecord/getEndRepair",
        },
        buyOperatorId:"",
        sealUpOperatorId:"",
        unsealUpOperatorId:"",
        scrapOperatorId:"",
        planTime: '',
        repairTime: '',
        buyTime: '',
        unsealUpTime: '',
        useTime: '',
        deviceCode: '',
        deviceName: '',
        typeId: '',
        deviceType: '',
        supplierId: '',
        directorId: '',
        location: '',
        price: '',
        img: '',
        code: '',
        submitId: '',
        submitTime: '',
        assignerId: '',
        maintenanceRecord: '',
        inspector: '',
        maintenanceTime: "",
        repairSubmitId: '',
        repairSubmitTime: '',
        description: '',
        // repairGrade: '',
        // repairType: '',
        reason: '',
        repairResult: '',
        orgName: '',
        acceptTime: '',
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.getTimesUrl({deviceId:record.deviceName}) //获取当前设备维修和点检的总次数
        this.getRateUrl({deviceId:record.deviceName}) //获取当前设备的故障率
        this.getTimeByCircle({deviceId:record.deviceName}) //获取设备生命周期三个时间
        this.getDeviceDataUrl({deviceId:record.deviceName}) //获取设备基本信息
        this.getMaintenanceUrl({deviceId:record.deviceName}) //获取设备最后一次维保信息
        this.getEndRepairUrl({deviceId:record.deviceName}) //获取设备最后一次维修信息
        this.model = Object.assign({}, record);
        // this.orgCode = record.orgCode;
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'deviceName','deviceStatus'))
        })
      },
      getEndRepairUrl(param) {
        let url = {};
        url = this.url.getEndRepair;
        this.getDataByName(url,param);
      },
      getDataByName(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.getDataFormRepair(res.result);
        })
      },
      getDataFormRepair(data) {
        this.repairSubmitId = data.submitId;
        this.repairSubmitTime = data.submitTime;
        this.description = data.description;
        // this.repairGrade = data.repairGrade;
        // this.repairType = data.repairType;
        this.reason = data.reason;
        this.repairResult = data.repairResult;
        this.orgName = data.orgName;
        this.acceptTime = data.acceptTime;
      },
      getTimesUrl(param) {
        let url = {};
        url = this.url.getTimesByDeviceId;
        this.loadDataTimes(url,param);
      },
      loadDataTimes(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.getTimesById(res.result);
        })
      },
      getTimesById(data) {
        for (let i=0; i<data.length ;i++) {
          this.planTime = `${data[i].planTimes}`;
          this.repairTime = `${data[i].repairTimes}`;
        }
      },
      getRateUrl(param) {
        let url = {};
        url = this.url.getRateByDeviceId;
        this.loadDataRate(url,param);
      },
      loadDataRate(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.countSource1 = [];
          this.getRateById(res.result);
        })
      },
      getRateById(data) {
        this.countSource1.push({ item:'故障率', count:data })
        this.countSource1.push({ item:'正常率', count:1-data })
      },
      getTimeByCircle(param) {
        let url = {};
        url = this.url.getTimeByLifeCircle;
        this.loadDataCircle(url,param);
      },
      loadDataCircle(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.getLifeTimesById(res.result);
        })
      },
      getLifeTimesById(data) {
        this.buyTime = data.buyTime;
        this.unsealUpTime = data.unsealUpTime;
        this.useTime = data.buyDes;
      },
      getDeviceDataUrl(param) {
        let url = {};
        url = this.url.getDeviceById;
        this.loadDeviceData(url,param);
      },
      loadDeviceData(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.getDeviceDataById(res.result);
        })
      },
      getDeviceDataById(data) {
        this.deviceName = data.deviceName;
        this.deviceCode = data.deviceCode;
        this.typeId = data.typeId;
        this.deviceType = data.deviceType;
        this.supplierId = data.supplierId;
        this.directorId = data.directorId;
        this.location = data.location;
        this.price = data.price;
        this.img = data.img;
        this.code = data.code;
      },
      getMaintenanceUrl(param) {
        let url = {};
        url = this.url.getMaintenanceById;
        this.loadMaintenanceData(url,param);
      },
      loadMaintenanceData(url,param) {
        getAction(url, param, 'get').then((res) => {
          this.getMaintenanceDataById(res.result);
        })
      },
      getMaintenanceDataById(data) {
        if (data === null) {
          this.maintenanceTime = "0";
        }else {
          this.submitId = data.submitId;
          this.submitTime = data.submitTime;
          this.assignerId = data.assignerId;
          this.maintenanceRecord = data.maintenanceRecord;
          this.inspector = data.inspector;
          this.maintenanceTime = data.img;
        }
      },
    //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'deviceId','deviceStatus'))
      },
      // add () {
      //   this.visible=true
      //   this.$nextTick(()=>{
      //     this.$refs.realForm.add();
      //   })
      // },
      // edit (record) {
      //   this.visible=true
      //   this.$nextTick(()=>{
      //     this.$refs.realForm.edit(record);
      //   })
      // },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>