<template>
  <div id="assetInformation" class="baseinfo-container">
    <el-form label-width="120px" :model="{ ...ywInfo }" ref="form">
      <div class="content">
        <headerTitle title="业务信息" style="margin-top: 15px"></headerTitle>

        <el-descriptions
          title=""
          :column="4"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
    
          <el-descriptions-item>
            <template slot="label"> 功率</template>
            <el-form-item label-width="0">
              <el-input class="input" v-model="ywInfo.power"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 考核情况</template>
            <el-form-item label-width="0">
              <el-input
                class="input"
                v-model="ywInfo.assessmentResults" placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 入账日期 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="ywInfo.entryDate"
                type="date"
                placeholder="选择入账日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
   
          <el-descriptions-item>
            <template slot="label"> 片区负责人部门 </template>
            <el-form-item label-width="0">
              <div class="input">
                <DeptSelect
                  v-model="ywInfo.areaPersonInChargeGroupId"
                  @input="getwhbm"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 片区负责人 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="ywInfo.areaPersonInChargeUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.repairUserId"
                  :key="item.id"
                  :label="item.name"
                  @click.native="repairUserIdChange(item)"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 片区负责人电话 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="ywInfo.areaPersonInChargePhone"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 生命周期 </template>
            <el-form-item label-width="0">
              {{sourceStatus[ywInfo.lifeCycle]}}
              <!-- <DictSelection
                dictName="设备生命周期"
                v-model="ywInfo.lifeCycle"
              ></DictSelection> -->
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 精度等级</template>
            <DictSelection
              dictName="精度等级"
              v-model="ywInfo.accuracyLevel"
            ></DictSelection>
            <!-- <el-form-item label-width="0">
              <el-input class="input" v-model="ywInfo.accuracyLevel"></el-input>
            </el-form-item> -->
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 网络状态 </template>
            <el-form-item label-width="0">
              <span>{{ networkStatusOptions[ywInfo.networkStatus] }}</span>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">设备状态 </template>
            <el-form-item label-width="0">
              <span>{{ statusOptions[ywInfo.status] }}</span>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 工位名称 </template>
            <el-form-item label-width="0">
              <el-select
                v-model="ywInfo.factoryId"
                placeholder="请选择"
                @change="change_factoryId"
                style="width: 24%; margin-right: 1%"
              >
                <el-option
                  v-for="item in factoryOptions"
                  :key="item.id"
                  :label="item.pathName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="ywInfo.workshopId"
                placeholder="请选择"
                style="width: 24%; margin-right: 1%"
                @change="change_workshop"
              >
                <el-option
                  v-for="item in workshopOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="ywInfo.productionLineId"
                placeholder="请选择"
                style="width: 24%; margin-right: 1%"
                @change="change_productionLineId"
              >
                <el-option
                  v-for="item in productionLineOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="ywInfo.workstation"
                placeholder="请选择"
                style="width: 24%; margin-right: 1%"
                @change="change_stationId"
              >
                <el-option
                  v-for="item in stationOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                style="margin-right: 10px; width: 20%"
                v-model="ywInfo.workstation.workshopPlanName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="ywInfo.workstation.workshopName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="ywInfo.workstation.productionLineName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="ywInfo.workstation.name"
                disabled
                placeholder="请输入内容"
              ></el-input> -->
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 改造时间 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="ywInfo.reformTime"
                type="date"
                placeholder="选择改造时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 改造内容</template>
            <el-form-item label-width="0">
              <el-input class="input" v-model="ywInfo.reformContent" placeholder="请输入"></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <headerTitle title="校准/检验" style="margin-top: 15px"></headerTitle>

        <el-descriptions
          title=""
          :column="4"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
          <el-descriptions-item :span="1">
            <template slot="label"> 有效期开始 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="ywInfo.startTime"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择有效期开始"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label"> 有效期结束 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="ywInfo.endTime"
                @change="endTimeRules"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择有效期结束"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 周期 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="ywInfo.cycle"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.deliveryCycle"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-form>
  </div>
</template>

<script>
import { networkStatus, businessStatus,sourceStatus } from '@/utils/dict/warehouse';
import { getByCode } from '@/api/system/dictionary-data';
import DeptSelect from '@/components/CommomSelect/dept-select.vue';
import { getUserPage } from '@/api/system/organization';

import {
  getFactoryarea,
  listWorkshopByParentId,
  listByProductionLineId,
  listFactoryLine
} from '@/api/factoryModel';
export default {
  data() {
    return {
      factoryOptions: [],
      productionLineOptions: [],
      stationOptions: [],
      workshopOptions: [],
      labelStyle: {
        width: '180px'
      },

      options: {
        deliveryCycle: [], // 送检周期
        repairUserId: []
      },
      ywInfo: {},
      // 状态
      statusOptions: {},
      sourceStatus,
      // 网络状态
      networkStatusOptions: {}
    };
  },
  mounted() {
    this.getFactoryareaList();
    this.getDeliveryCycleOptions();
    this.initStatusMapping();
    this.initNetworkMapping();
    this.geMaintainersList();
    if (this.form.networkStatus < 0) {
      this.form.networkStatus = 0;
    }
    if (this.form.status < 0) {
      this.form.status = 0;
    }
  },
  components: {
    DeptSelect
  },
  methods: {
    // 维护部门
    async getwhbm() {
      if (!this.ywInfo.areaPersonInChargeGroupId) return;
      let data = await getUserPage({
        pageNum: 1,
        size: 9999,
        groupId: this.ywInfo.areaPersonInChargeGroupId
      });
      this.options.repairUserId = data.list;
    },
    // 获取维护人下拉列表
    async geMaintainersList() {
      if (!this.ywInfo.areaPersonInChargeGroupId) return;
      let data = await getUserPage({
        pageNum: 1,
        size: 9999,
        groupId: this.ywInfo.areaPersonInChargeGroupId
      });
      this.options.repairUserId = data.list;
    },
    // 获取工厂数据
    getFactoryareaList() {
      getFactoryarea({
        type: 1,
        size: 9999,
        type: 2
      }).then((res) => {
        this.factoryOptions = res.list;
      });
    },
    // 获取车间
    getListWorkshopByParentId(id) {
      listWorkshopByParentId(id).then((res) => {
        this.workshopOptions = res;
      });
    },

    // 获取产线
    getlistFactoryLineByParentId(id) {
      listFactoryLine([id]).then((res) => {
        this.productionLineOptions = res;
      });
    },

    // 获取工位
    getlistByProductionLineId(id) {
      listByProductionLineId(id).then((res) => {
        this.stationOptions = res;
      });
    },
    change_factoryId(id) {
      this.ywInfo.workshopId = '';
      this.ywInfo.productionLineId = '';
      this.ywInfo.workstation = '';
      this.workshopOptions = [];
      this.productionLineOptions = [];
      this.stationOptions = [];
      this.ywInfo.factoryRoomId = id;
      this.ywInfo.factoryRoomName = this.factoryOptions.filter(
        (item) => item.id === id
      )[0].pathName;
      this.getListWorkshopByParentId(id);
    },
    change_productionLineId(id) {
      this.ywInfo.workstation = '';
      this.stationOptions = [];
      this.ywInfo.productionLineName = this.productionLineOptions.filter(
        (item) => item.id === id
      )[0].name;
      this.getlistByProductionLineId(id);
    },
    change_workshop(id) {
      this.ywInfo.productionLineId = '';
      this.ywInfo.workstation = '';
      this.productionLineOptions = [];
      this.stationOptions = [];
      this.ywInfo.workshopName = this.workshopOptions.filter(
        (item) => item.id === id
      )[0].name;
      this.getlistFactoryLineByParentId(id);
    },
    change_stationId(id) {
      this.$forceUpdate();
      this.ywInfo.stationName = this.stationOptions.filter(
        (item) => item.id === id
      )[0].name;
    },
    // 获取送检周期下拉
    async getDeliveryCycleOptions() {
      let { data } = await getByCode('delivery_cycle');
      console.log(data);
      this.options.deliveryCycle =
        data.length > 0
          ? data.map((item) => {
              return {
                name: item[Object.keys(item)[0]],
                id: +Object.keys(item)[0]
              };
            })
          : [];
    },
    repairUserIdChange(item){
      this.ywInfo.areaPersonInChargePhone=item.phone
      
    },
    // 限制结束时间
    endTimeRules() {
      if (this.ywInfo.startTime) {
        console.log(this.ywInfo.startTime);
        console.log(new Date(this.ywInfo.startTime).getTime());
        let differenceTime =
          new Date(this.ywInfo.endTime).getTime() -
          new Date(this.ywInfo.startTime).getTime();
        if (differenceTime <= 0) {
          this.$message.error('请选择正确的有效结束时间');
          this.ywInfo.endTime = '';
        }
      } else {
        this.$message.error('请选择有效开始时间');
        this.ywInfo.endTime = '';
      }
    },
    initStatusMapping() {
      businessStatus.forEach((item) => {
        this.statusOptions[item.code] = item.label;
      });
    },

    initNetworkMapping() {
      networkStatus.forEach((item) => {
        this.networkStatusOptions[item.code] = item.label;
      });
    }
  },
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    form: {
      deep: true, //深度监听设置为 true
      handler: function (newV) {
        if (!newV.networkStatus) {
          newV.networkStatus = 0;
        }
        if (!newV.status) {
          newV.status = 0;
        }
        this.ywInfo = newV;
        if (this.options.repairUserId.length == 0) {
          this.geMaintainersList();
        }
        // 获取车间
        if (this.workshopOptions.length == 0 && this.ywInfo.productionLineId) {
          this.getListWorkshopByParentId(this.ywInfo.factoryId);
        }

        // 获取产线
        if (this.productionLineOptions.length == 0 && this.ywInfo.workshopId) {
          this.getlistFactoryLineByParentId(this.ywInfo.workshopId);
        }

        // 获取工位
        if (this.stationOptions.length == 0 && this.ywInfo.productionLineId) {
          this.getlistByProductionLineId(this.ywInfo.productionLineId);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-descriptions-item__label.is-bordered-label) {
  color: #606266;
}
::v-deep .descriptions {
  margin-bottom: 10px;
}
.baseinfo-container .basic-details-title {
  font-size: 16px;
  margin: 15px 0;
}
::v-deep .el-descriptions {
  .el-form-item {
    margin-bottom: 0px;
  }
}
:deep(.el-input__inner){
  border:none
}
:deep(.el-descriptions--medium.is-bordered){
  .el-descriptions-item__cell{
    padding: 3px  10px;
  }
}
</style>
