<template>
  <div id="assetInformation" class="baseinfo-container">
    <el-form label-width="120px" :model="{ ...zcInfo }" 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="zcInfo.fixCode"
                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="zcInfo.codeNumber"
                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="zcInfo.LicensePlateNum"
                placeholder="请输入"
              ></el-input>
            </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="zcInfo.level"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.assetLevel"
                  :key="item.id"
                  :label="item.name"
                  :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
                class="input"
                v-model="zcInfo.exFactoryCode"
                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="zcInfo.manufactureTime"
                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-date-picker
                style="width: 100%"
                v-model="zcInfo.startUsingTime"
                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-date-picker
                style="width: 100%"
                v-model="zcInfo.createAccountsTime"
                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">
                <!-- <el-input
                  v-model="zcInfo.workstation.groupName"
                  disabled
                  placeholder="请输入内容"
                ></el-input> -->
                <DeptSelect
                  v-model="zcInfo.ownershipGroupId"
                  @input="getqsbm"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 权属人 </template>
            <el-form-item label-width="0">
              <!-- <el-input
                v-model="zcInfo.workstation.leaderName"
                disabled
                placeholder="请输入内容"
              ></el-input> -->
              <el-select
                style="width: 100%"
                v-model="zcInfo.ownershipUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.ownershipUserId"
                  :key="item.id"
                  :label="item.name"
                  :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-value="zcInfo.workstation?.taskNames"
                disabled
                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="zcInfo.serviceLife"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 已使用年限 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.alreadyServiceLife"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 增值金额 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.incrementAmount"
                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="zcInfo.incrementTime"
                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
                v-model="zcInfo.originalValue"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 净值 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.netWorth"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 残值 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.scrapValue"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进口 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.Import"
                placeholder="请输入内容"
              ></el-input>
            </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="zcInfo.isPublic"
                filterable
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.name"
                  :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">
              <DeptSelect
                v-model="zcInfo.postId"
                @changeGroup="auditorDeptClick"
              />
            </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="zcInfo.usePersonId"
                filterable
                placeholder="请选择使用人"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="usePersonIdChange(item)"
                >
                </el-option>
              </el-select>
            </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="zcInfo.chargePersonId"
                @change="personIdChange"
                :disabled="isLock ? zcInfo.isPublic > 0 : false"
                filterable
                placeholder="请选择负责人"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :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-select
                v-model="zcInfo.supplierId"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.suppList"
                  :key="item.id"
                  :label="item.name"
                  :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
                class="input"
                v-model="zcInfo.manufacturer"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 品牌 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.brand"
                class="input"
                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="zcInfo.color"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 设备用途 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.purpose"
                class="input"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="4">
            <template slot="label"> 设备位置 </template>
            <el-form-item label-width="0" prop="location">
              <div style="display: flex">
                <el-cascader
                  style="width: 40%"
                  clearable
                  v-model="zcInfo.location"
                  :options="options.cityDataLabel"
                ></el-cascader>
                <el-input
                  style="margin-left: 10px"
                  placeholder="详细地址"
                  v-model="zcInfo.deviceDetailAddress"
                ></el-input>
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="4">
            <template slot="label"> 备注 </template>
            <el-form-item label-width="0">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="zcInfo.remark"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-form>
  </div>
</template>

<script>
  import DeptSelect from '@/components/CommomSelect/dept-select.vue';
  import WorkshopSelect from '@/components/CommomSelect/workshop-select.vue';
  import FactoryAreaSelect from '@/components/CommomSelect/factory-area-select.vue';
  import WorkingProcedureSelect from '@/components/CommomSelect/working-procedure-select.vue';
  import factorySelect from '@/components/CommomSelect/factory-select.vue';
  import fileUpload from '@/components/upload/fileUpload';
  import WithView from '@/components/upload/WithView';
  import imgUpload from '@/components/upload/imgUpload';
  import { cityDataLabel } from 'ele-admin/packages/utils/regions';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import { saveOrEdit, getAssetInfo } from '@/api/ledgerAssets';
  import { getUserPage } from '@/api/system/organization';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { getByCode } from '@/api/system/dictionary-data';
  import { data } from 'ele-admin/lib/ele-pro-table';
  export default {
    components: {
      WithView,
      WorkshopSelect,
      FactoryAreaSelect,
      WorkingProcedureSelect,
      fileUpload,
      imgUpload,
      factorySelect,
      DeptSelect,
      personSelect
    },
    props: {
      isEdit: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        userList: [], // 人员列表
        labelStyle: {
          width: '180px'
        },

        pageType: 'add',
        id: '', // 设备主键id
        rules: {
          name: [
            { required: true, message: '请输入设备名称', trigger: 'blur' }
          ],
          code: [{ required: true, message: '请输入设备编码', trigger: 'blur' }]
        },
        typeOptions: [
          {
            id: 0,
            name: '专用'
          },
          {
            id: 1,
            name: '公用'
          }
        ],
        // 资产信息
        // zcInfo: {
        //   // 	固定资产编码
        //   fixCode: '',
        //   // 颜色
        //   color: '',
        //   // 重量
        //   weight: '',
        //   // 维护部门
        //   repairGroupId: '',
        //   repairUserId: '',
        //   // 设备用途
        //   purpose: '',
        //   // 设备位置
        //   location: '',
        //   //品牌
        //   brand: '',
        //   // 供应商code
        //   supplierId: '',
        //   // 编号
        //   codeNumber: '',
        //   // 使用人
        //   usePersonId: '',
        //   // 有效期开始
        //   startTime: '',
        //   // 有效结束
        //   endTime: '',
        //   // 级别
        //   level: '',
        //   // 状态
        //   status: '',
        //   // 负责人
        //   chargePersonId: '',
        //   // 入账日期
        //   entryDate: '',
        //   // 周期
        //   cycle: '',
        //   // 备注
        //   remark: '',
        //   // 使用岗位
        //   postId: ''
        // },
        options: {
          ownershipUserId: [], // 权属人
          repairUserId: [], // 维护人
          supplierId: [], // 供应商
          cityDataLabel, // 设备位置
          assetLevel: [], // 资产级别
          deliveryCycle: [], // 送检周期
          suppList: [] // 供应商
        },
        zcInfo: {
          workstation: {}
        }
      };
    },
    props: {
      form: {
        type: Object,
        default: {
          workstation: {}
        }
      },
      isLock: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      form: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newValue) {
          this.zcInfo = newValue;
          if (this.options.ownershipUserId.length == 0) {
            this.getqsbm();
          }
        }
      }
    },
    async mounted() {
      // 获取资产级别下拉框
      await this.getAssetLevelOptions();
      // 获取送检周期下拉
      await this.getDeliveryCycleOptions();
      // 获取供应商下拉列表
      await this.getSuppliersList();

      // 初始化数据
      setTimeout(() => {
        this.initData();
      }, 500);
    },
    methods: {
      usePersonIdChange(data) {
        if (this.zcInfo.isPublic > 0 && this.isLock) {
          this.zcInfo.chargePersonId = data.id;
        }
        this.zcInfo.usePerson = data.name;
        this.$forceUpdate();
      },
      personIdChange() {
        this.$forceUpdate();
      },

      // 获取资产级别下拉
      async getAssetLevelOptions() {
        let { data } = await getByCode('asset_level');
        this.options.assetLevel =
          data.length > 0
            ? data.map((item) => {
                return {
                  name: Object.keys(item)[0],
                  id: item[Object.keys(item)[0]]
                };
              })
            : [];
      },
      // 获取送检周期下拉
      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]
                };
              })
            : [];
      },
      // 获取维护人下拉列表
      async geMaintainersList() {
        if (!this.zcInfo.areaPersonInChargeGroupId) return;
        let data = await getUserPage({
          pageNum: 1,
          size: 9999,
          groupId: this.zcInfo.areaPersonInChargeGroupId
        });
        this.options.repairUserId = data.list;
      },
      // 使用岗位点击事件
      async auditorDeptClick(id, data) {
        this.zcInfo.chargePersonId = '';
        this.zcInfo.usePersonId = '';
        this.userList = [];
        this.postName = data.name;
        if (id) {
          this.getStaffList(id);
        }
      },
      // 获取供应商下拉列表
      async getSuppliersList() {
        const rep = await warehouseDefinition.eomContact({
          type: 2,
          status: 1,
          size: -1,
          pageNum: 1
        });
        this.options.suppList = rep.list;
      },
      // 通过部门岗位获取人员列表
      async getStaffList(id) {
        let res = await warehouseDefinition.getUserPage({
          groupId: id,
          size: 9999,
          page: 1
        });
        this.userList = res.list;
      },
      // 权属部门
      async getqsbm() {
        if (!this.zcInfo.ownershipGroupId) {
          this.options.ownershipUserId = [];
          this.zcInfo.ownershipUserId = '';
        } else {
          let data = await getUserPage({
            pageNum: 1,
            size: 9999,
            groupId: this.zcInfo.ownershipGroupId
          });
          this.options.ownershipUserId = data.list;
        }
      },

      // 初始化
      async initData() {
        console.log('this.zcInfo---------------------', this.zcInfo);
        // 填充使用岗位
        this.zcInfo.postId && this.getStaffList(this.zcInfo.postId);
        // 获取设备绑定信息
        this.geMaintainersList();
      }
    }
  };
</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;
  }
  .upload-container {
    display: flex;
    justify-content: flex-start;
    .file-list {
      margin-left: 50px;
      flex: 1;
    }
  }
  .equipment-container {
    // .content {
    //   padding: 0 20px;
    // }
    .label-none {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  .sbwz {
    .item {
      width: 120px !important;
    }
    .item + .item {
      margin-left: 10px;
    }
    .item-input {
      width: 350px !important;
    }
  }
  .input {
    width: 100%;
  }
  .kzzd {
    width: 500px;
    .add-col {
      display: flex;
      .col-input {
        & + .col-input {
          margin-left: 10px;
        }
      }
      .del {
        margin-left: 10px;
      }
    }
  }
  ::v-deep .el-descriptions {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  :deep(.el-input__inner) {
    border: none;
  }
  :deep(.el-textarea__inner) {
    border: none;
  }

  :deep(.el-descriptions--medium.is-bordered) {
    .el-descriptions-item__cell {
      padding: 3px 10px;
    }
  }
</style>
