<template>
  <div class="app-container">
    <el-form
      :inline="true"
      label-width="auto" size="small"
      ref="searchFormRef"
      :model="searchParams"
    >
      <el-card class="search-box">
        <el-row :gutter="5" style="display: flex; justify-content: space-between">
          <el-col :span="5" style="width: 320px">
            <el-form-item prop="leaseName" label="需求名称">
              <el-input
                clearable
                style="width: 100%"
                placeholder="请输入需求名称"
                v-model="searchParams.leaseName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" style="width: 320px">
            <el-form-item prop="leaseCode" label="需求编号">
              <el-input
                clearable
                style="width: 100%"
                placeholder="请输入需求编号"
                v-model="searchParams.leaseCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" style="width: 320px">
            <el-form-item prop="leaseStatus" label="需求状态">
              <el-select
                clearable
                style="width: 100%"
                placeholder="选择需求状态"
                v-model="searchParams.leaseStatus"
              >
                <el-option label="待接单" :value="0"/>
                <el-option label="已接单" :value="1"/>
                <el-option label="已到期" :value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="截止日期">
              <el-date-picker
                v-model="endTime"
                type="daterange"
                style="width: 240px"
                range-separator="-"
                value-format="YYYY-MM-DD"
                start-placeholder="截止开始日期"
                end-placeholder="截止结束日期"

              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="发布日期">
              <el-date-picker
                type="daterange"
                style="width: 240px"
                v-model="releaseTime"
                range-separator="-"
                value-format="YYYY-MM-DD"
                start-placeholder="发布开始日期"
                end-placeholder="发布结束日期"
              />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="24" style="text-align: right; margin-top: 10px;padding-right: 15px">
            <el-button @click="getLeaseListData" size="mini" icon="el-icon-search" type="primary" class="primary-lease"
            >查询
            </el-button
            >
            <el-button @click="onReset" icon="el-icon-refresh" size="mini" class="primary-lease">重置</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-card class="content-box">
      <el-row>
        <el-col :span="24" style="text-align: right;">
          <el-button size="mini"
                     @click="
                        () => {
                            isRepublish = true
                            dialogTitle = '新增'
                            addOrEditDialogVisible = true
                        }
                    "
                     type="primary"
                     class="primary-lease"
          >
            需求新建
          </el-button>
        </el-col>
      </el-row>
      <div class="table-container">
        <!-- 表格 -->
        <el-table
          :data="leaseList"
          show-overflow-tooltip
          border stripe height="546"
        >
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="需求编号">
            <template slot-scope="scope">
              <a
                style="cursor: pointer; color: #00a288; text-decoration: underline"
                @click="handleToDetails(scope.row.id)"
              >
                {{ scope.row.leaseCode }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="leaseName" label="需求名称"/>
          <el-table-column align="center" prop="cityName" label="需求所在地"/>
          <el-table-column align="center" prop="publishUser" label="发布人"/>
          <el-table-column align="center" prop="endTime" label="需求截止日期" width="120"/>
          <el-table-column align="center" prop="startTime" label="发布时间"/>
          <el-table-column align="center" prop="orderUser" label="接单人"/>
          <el-table-column align="center" prop="orderPhone" label="接单人联系方式" width="140"/>
          <el-table-column align="center" prop="leaseStatusName" label="需求状态"/>
          <el-table-column align="center" label="操作" :width="220">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                class="primary-lease"
                v-if="scope.row.leaseStatus === 2 || scope.row.leaseStatus === 4"
                @click="onRepublish(scope.row.id, false)"
              >
                重新发布
              </el-button>
              <el-button
                size="small"
                type="primary"
                class="primary-lease"
                v-if="
                            scope.row.leaseStatus === 2 || scope.row.leaseStatus === 0 || scope.row.leaseStatus === 4
                        "
                @click="onRepublish(scope.row.id, true, scope.row.leaseStatus)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="primary"
                class="primary-lease"
                v-if="scope.row.leaseStatus === 3"
                @click="onAuditing(scope.row.id, 1)"
              >
                通过
              </el-button>
              <el-button
                size="small"
                type="primary"
                class="primary-lease"
                v-if="scope.row.leaseStatus === 3"
                @click="onAuditing(scope.row.id, 4)"
              >
                驳回
              </el-button>
              <el-popconfirm
                width="220"
                icon="el-icon-info"
                icon-color="#626AEF"
                title="确定删除该项需求吗？"
                @confirm="onDelete(scope.row.id)"
                v-if="scope.row.leaseStatus === 2 || scope.row.leaseStatus === 0"
              >
                <template slot="reference">
                  <el-button size="small" type="primary" class="primary-lease">
                    删除
                  </el-button>
                </template>
                <template slot="actions">
                  <el-button type="primary" class="primary-lease" size="small"
                  >取消
                  </el-button
                  >
                  <el-button
                    class="primary-lease"
                    type="primary"
                    size="small"
                    @click="confirmDelete"
                  >
                    确定
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <pagination
          :total="total"
          @pagination="getLeaseListData"
          :page.sync="searchParams.pageNum"
          :limit.sync="searchParams.pageSize"
        />
      </div>
    </el-card>
    <!-- 新增修改对话框 -->

    <el-dialog
      width="60%"
      align-center
      @close="onClose"
      destroy-on-close
      :title="dialogTitle"
      :visible.sync="addOrEditDialogVisible"
    >
      <el-form
        label-width="auto"
        label-position="right"
        ref="addOrEditFormRef"
        :model="addOrEditForm"
        :rules="addOrEditFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目所在地" style="width: 100%" prop="provinceCode">
              <el-row style="width: 100%">
                <el-col :span="6">
                  <el-form-item>
                    <el-select
                      clearable
                      style="width: 95%"
                      placeholder="请选择项目所在省"
                      v-model="addOrEditForm.provinceCode"
                      @change="onProvinceChange"
                    >
                      <el-option
                        :key="item.areaId"
                        :value="item.areaCode * 1"
                        :label="item.areaName"
                        v-for="item in areaList"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="cityCode">
                    <el-select
                      clearable
                      style="width: 95%"
                      placeholder="请选择项目所在市"
                      v-model="addOrEditForm.cityCode"
                      @change="onCityChange"
                    >
                      <el-option
                        :key="item.areaId"
                        :value="item.areaCode * 1"
                        :label="item.areaName"
                        v-for="item in areaCityList"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="areaCode">
                    <el-select
                      clearable
                      style="width: 95%"
                      placeholder="请选择项目所在区/县"
                      v-model="addOrEditForm.areaCode"
                      @change="onCountyChange"
                    >
                      <el-option
                        :key="item.areaId"
                        :value="item.areaCode * 1"
                        :label="item.areaName"
                        v-for="item in areaCountyList"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="address">
                    <el-input
                      style="width: 100%"
                      clearable
                      placeholder="请输入详细地址"
                      v-model="addOrEditForm.address"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="需求名称" prop="leaseName">
              <el-input
                v-model="addOrEditForm.leaseName"
                placeholder="请输入需求名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求截止日期" prop="endTime">
              <el-date-picker
                clearable
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledDate"
                v-model="addOrEditForm.endTime"
                placeholder="请选择需求截止日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="person">
              <el-input
                clearable
                placeholder="请输入联系人"
                v-model="addOrEditForm.person"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="personPhone">
              <el-input
                clearable
                placeholder="请输入联系电话"
                v-model="addOrEditForm.personPhone"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="租赁开始日期" prop="leaseStartTime">
              <el-date-picker
                clearable
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledDate"
                v-model="addOrEditForm.leaseStartTime"
                placeholder="请选择需求截止日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租赁结束日期" prop="leaseEndTime">
              <el-date-picker
                clearable
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledLeaseEndTime"
                v-model="addOrEditForm.leaseEndTime"
                placeholder="请选择需求截止日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="dialogTitle === '新增'">
          <el-col :span="24">
            <el-form-item label="是否短信通知" prop="isSms">
              <el-radio-group v-model="addOrEditForm.isSms">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="addOrEditForm.isSms == 0">
          <el-col :span="12">
            <el-form-item label="组织机构" prop="dept">
              <el-cascader
                clearable
                :props="orgProps"
                :options="orgList"
                :show-all-levels="false"
                placeholder="请选择组织机构"
                v-model="addOrEditForm.deptIdList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleId">
              <el-select
                clearable
                style="width: 95%"
                placeholder="请选择角色"
                v-model="addOrEditForm.roleId"
              >
                <el-option
                  :key="item.roleId"
                  :value="item.roleId"
                  :label="item.roleName"
                  v-for="item in roleList"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="需求描述" prop="description">
              <el-input
                clearable
                type="textarea"
                placeholder="请输入需求描述"
                v-model="addOrEditForm.description"
                :autosize="{ minRows: 4, maxRows: 6 }"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label="装备需求信息"
              style="font-weight: bold"
              prop="detailsList"
            >
              <el-button
                class="primary-lease"
                type="primary"
                @click="onAddDemandInfo"
              >
                添加装备描述
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form
        label-width="auto"
        label-position="right"
        v-for="(item, index) in addOrEditForm.detailsList"
        :key="item.newId"
        :model="item"
        :rules="addOrEditDemandFormRules"
        :ref="'demandForm_' + index"
        style="position: relative"
      >
        <div
          style="
                        position: absolute;
                        left: -28px;
                        top: 0;
                        width: 26px;
                        height: 26px;
                        border-radius: 13px;
                        font-weight: bold;
                        text-align: center;
                        line-height: 26px;
                        color: #fff;
                        background-color: #00a288;
                    "
        >
          {{ index + 1 }}
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装备类目选择" prop="typeIds">
              <el-cascader
                clearable
                style="width: 100%"
                :options="classOptions"
                :show-all-levels="false"
                placeholder="请选择装备类目"
                v-model="item.typeIds"
                :props="{
                                    value: 'id',
                                    label: 'name',
                                    checkStrictly: true,
                                }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估数量" prop="leaseNum">
              <el-input-number
                clearable
                :min="1"
                :max="9999"
                style="width: 100%"
                placeholder="请输入预估数量"
                v-model="item.leaseNum"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装备描述">
              <el-input
                clearable
                type="textarea"
                placeholder="请输入装备描述"
                v-model="item.description"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="index !== 0">
            <el-button
              size="small"
              type="danger"
              class="primary-lease"
              @click="onDeleteDemand(index)"
            >
              移除
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="primary-lease" @click="onCancel"
        >取消
        </el-button
        >
        <el-button
          type="primary"
          class="primary-lease"
          @click="onSubmit(false)"
          v-if="isSave"
        >
          保存
        </el-button>
        <el-button class="primary-lease" type="primary" @click="onSubmit(true)">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCompanyListApi,
  getGoodsClassListApi,
  getAreaApi,
  getOrgApi,
  getRoleApi,
  addLeaseInfoApi,
  getLeaseListApi,
  maLeaseAuditApi,
  editLeaseInfoApi,
  deleteLeaseInfoApi,
  getLeaseDetailsByIdApi
} from '@/api/sourcingNeed/index'
import {MessageBox, Message} from 'element-ui'

export default {
  data() {
    return {
      total: 0,
      endTime: [],
      isSave: false,
      releaseTime: [],
      isRepublish: true,
      areaList: [],
      leaseList: [],
      dialogTitle: '新增',
      classOptions: [],
      fileListTemp: [],
      companyOptions: [],
      searchFormRef: null,
      addOrEditFormRef: null,
      addOrEditDialogVisible: false,
      addOrEditDemandFormList: [],
      addOrEditDemandFormRefList: [],
      areaProvinceList: [],
      areaCityList: [],
      areaCountyList: [],
      uploadUrl: process.env.VUE_APP_API_URL + '/file/upload',

      searchParams: {
        leaseName: '',
        leaseCode: '',
        leaseStatus: '',
        finishStartTime: '',
        finishEndTime: '',
        publishStartTime: '',
        publishEndTime: '',
        pageSize: 10,
        pageNum: 1
      },
      addOrEditForm: {
        leaseName: '',
        companyId: '',
        person: '',
        personPhone: '',
        leaseStartTime: '',
        leaseEndTime: '',
        endTime: '',
        description: '',
        isSubmit: '',
        fileInfoList: [],
        fileInfoTempList: [],
        areaCode: '',
        cityCode: '',
        provinceCode: '',
        address: '',
        detailsList: [],
        isSms: '1',
        roleId: '',
        deptId: '',
        deptIdList: ''
      },
      addOrEditFormTemp: {
        leaseName: '',
        companyId: '',
        person: '',
        personPhone: '',
        leaseStartTime: '',
        leaseEndTime: '',
        endTime: '',
        description: '',
        isSubmit: '',
        fileInfoList: [],
        fileInfoTempList: [],
        areaCode: '',
        cityCode: '',
        provinceCode: '',
        address: '',
        detailsList: [],
        isMessage: 0,
        roleId: '',
        deptId: '',
        isSms: '1',
        deptIdList: []
      },
      orgList: [],
      roleList: [],
      orgProps: {
        value: 'id'
      }
    }
  },
  computed: {
    minLimit() {
      return this.addOrEditForm.fileInfoList.length
    }
  },
  methods: {
    // 跳转到详情页
    handleToDetails(id) {
      this.$router.push({name: 'demand-details', query: {id}})
    },

    // 验证结束时间
    checkEndTime(rule, value, callback) {
      if (!value) {
        return callback(new Error('请选择租赁结束日期'))
      }
      const startTime = this.addOrEditForm.leaseStartTime
      if (startTime && new Date(value) <= new Date(startTime)) {
        return callback(new Error('租赁结束日期必须大于租赁开始日期'))
      }
      callback()
    },

    // 验证开始时间
    checkStartTime(rule, value, callback) {
      if (!value) {
        return callback(new Error('请选择租赁开始日期'))
      }
      const endTime = this.addOrEditForm.leaseEndTime
      if (endTime && new Date(value) >= new Date(endTime)) {
        return callback(new Error('租赁开始日期必须小于租赁结束日期'))
      }
      callback()
    },

    // 禁用今天之前的日期
    disabledDate(date) {
      const today = new Date()
      return date.getTime() < today.getTime()
    },

    // 禁用租赁结束日期
    disabledLeaseEndTime(date) {
      const today = new Date()
      return date.getTime() < today.getTime()
    },

    // 获取分类和公司数据
    async getClassAndCompanyData() {
      const classResult = await getGoodsClassListApi()
      const companyResult = await getCompanyListApi()

      // 只需要前3个层级
      const filterData = (data, level = 1) => {
        return data.map(item => {
          if (level < 3 && item.children) {
            item.children = filterData(item.children, level + 1)
          } else {
            item.children = []
          }
          return item
        })
      }

      this.classOptions = filterData(classResult.data)
      this.companyOptions = companyResult.data
    },

    // 获取列表数据
    async getLeaseListData() {
      if (this.endTime.length > 0) {
        this.searchParams.finishStartTime = this.endTime[0]
        this.searchParams.finishEndTime = this.endTime[1]
      }
      if (this.releaseTime.length > 0) {
        this.searchParams.publishStartTime = this.releaseTime[0]
        this.searchParams.publishEndTime = this.releaseTime[1]
      }

      const res = await getLeaseListApi(this.searchParams)
      this.leaseList = res.rows
      this.total = res.total
    },

    // 获取地区数据
    async getAreaData() {
      const res = await getAreaApi(0)
      this.areaList = res.data
    },

    // 重置表单
    onReset() {
      this.endTime = []
      this.releaseTime = []
      this.searchParams.finishStartTime = ''
      this.searchParams.finishEndTime = ''
      this.searchParams.publishStartTime = ''
      this.searchParams.publishEndTime = ''
      this.searchParams.pageNum = 1
      this.searchParams.pageSize = 10
      this.$refs.searchFormRef.resetFields()
      this.getLeaseListData()
    },

    // 删除需求
    async onDelete(id) {
      const res = await deleteLeaseInfoApi({id})
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '删除成功'
        })
        this.getLeaseListData()
      }
    },

    // 确认删除
    confirmDelete() {
      // 由el-popconfirm自动处理
    },

    // 重新发布
    async onRepublish(id, type, leaseStatus) {
      this.dialogTitle = '编辑'
      this.isRepublish = false
      this.isSave = type
      if (leaseStatus === 0) this.isSave = false

      const res = await getLeaseDetailsByIdApi({id})
      const {
        leaseName,
        companyId,
        person,
        personPhone,
        endTime,
        description,
        fileInfoList,
        areaCode,
        address,
        cityCode,
        provinceCode,
        detailsList,
        leaseStartTime,
        leaseEndTime
      } = res.data

      Object.assign(this.addOrEditForm, {
        leaseName,
        companyId,
        person,
        personPhone,
        endTime,
        description,
        id,
        fileInfoList: fileInfoList ? fileInfoList : [],
        areaCode,
        address,
        cityCode,
        provinceCode,
        detailsList,
        leaseStartTime,
        leaseEndTime
      })

      detailsList.forEach(e => {
        if (!e.fileInfoList) {
          e.fileInfoList = []
        }
        e.fileInfoTempList = []
        e.typeIds = e.typeIds.map(j => {
          return j * 1
        })
      })

      await Promise.all([
        this.onProvinceChange(provinceCode),
        this.onCityChange(cityCode)
      ])

      this.addOrEditDialogVisible = true
    },

    // 提交表单
    async onSubmit(type) {
      this.$refs.addOrEditFormRef.validate(async (valid) => {
        if (valid) {
          this.addOrEditForm.isSubmit = type
          this.addOrEditForm.fileInfoList.push(...this.fileListTemp)

          let isDemand = false
          for (let index = 0; index < this.addOrEditForm.detailsList.length; index++) {
            try {
              const valid = await new Promise((resolve) => {
                this.$refs[`demandForm_${index}`].validate(valid => {
                  resolve(valid)
                })
              })

              if (!valid) {
                isDemand = true
                throw new Error('表单校验失败')
              }
            } catch (error) {
            }
          }

          if (isDemand) return

          this.addOrEditForm.fileInfoList = [
            ...this.addOrEditForm.fileInfoList,
            ...this.addOrEditForm.fileInfoTempList
          ]

          this.addOrEditForm.detailsList.forEach(e => {
            e.fileInfoList = [...e.fileInfoList, ...e.fileInfoTempList]
            e.typeId = e.typeIds[e.typeIds.length - 1]
          })

          this.addOrEditForm.endTime = this.addOrEditForm.endTime.replace(
            '00:00:00',
            '23:59:59'
          )
          this.addOrEditForm.leaseEndTime = this.addOrEditForm.leaseEndTime.replace(
            '00:00:00',
            '23:59:59'
          )

          if (this.addOrEditForm.deptIdList && this.addOrEditForm.deptIdList.length > 0) {
            this.addOrEditForm.deptId =
              this.addOrEditForm.deptIdList[this.addOrEditForm.deptIdList.length - 1]
          }

          const SUBMIT_API = this.isRepublish ? addLeaseInfoApi : editLeaseInfoApi
          const res = await SUBMIT_API(this.addOrEditForm)

          if (res.code === 200) {
            Message({
              type: 'success',
              message: '提交成功'
            })

            this.addOrEditDialogVisible = false
            this.getLeaseListData()
          }
        }
      })
    },

    // 文件变化处理
    onFileChange(fileList) {
      this.addOrEditForm.fileInfoTempList = []
      const fileListTemp = fileList.map(e => {
        return {
          fileName: e.name,
          fileUrl: e.url
        }
      })

      this.addOrEditForm.fileInfoTempList.push(...fileListTemp)
    },

    // 详情中的文件变化
    onFileChangeInDetails(fileList, index) {
      this.addOrEditForm.detailsList[index].fileInfoTempList = []
      const fileListTemp = fileList.map(e => {
        return {
          fileName: e.name,
          fileUrl: e.url
        }
      })
      this.addOrEditForm.detailsList[index].fileInfoTempList.push(...fileListTemp)
    },

    // 取消按钮
    onCancel() {
      this.addOrEditDialogVisible = false
    },

    // 关闭对话框
    onClose() {
      this.addOrEditDemandFormList = []
      this.$refs.addOrEditFormRef.resetFields()
      this.addOrEditForm = JSON.parse(JSON.stringify(this.addOrEditFormTemp))
      this.fileListTemp = []
    },

    // 删除图片
    onDeleteImg(index) {
      this.addOrEditForm.fileInfoList.splice(index, 1)
    },

    // 删除详情中的图片
    onDeleteImgInDetails(index, j) {
      this.addOrEditForm.detailsList[index].fileInfoList.splice(j, 1)
    },

    // 分类变化
    onChangeClass(val) {
      console.log(val, '***')
    },

    // 添加需求信息
    onAddDemandInfo() {
      const newId = Date.now()
      this.addOrEditForm.detailsList.push({
        newId,
        typeIds: [],
        typeId: '',
        leaseNum: 1,
        fileInfoList: [],
        fileInfoTempList: [],
        description: ''
      })
    },

    // 删除需求项
    onDeleteDemand(index) {
      this.addOrEditForm.detailsList.splice(index, 1)
      // 重新命名表单引用
      this.$nextTick(() => {
        this.addOrEditDemandFormRefList.forEach((e, i) => {
          if (i > index && e) e.clearValidate()
        })
      })
    },

    // 省份变化
    async onProvinceChange(id) {
      const res = await getAreaApi(id)
      this.areaCityList = res.data
    },

    // 城市变化
    async onCityChange(id) {
      const res = await getAreaApi(id)
      this.areaCountyList = res.data
    },

    // 区县变化
    async onCountyChange(id) {
    },

    // 审核处理
    onAuditing(id, leaseStatus) {
      MessageBox.confirm(`是否${leaseStatus === 1 ? '通过' : '驳回'}此次接单申请?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      })
        .then(async () => {
          const res = await maLeaseAuditApi({
            id,
            leaseStatus
          })
          if (res.code == 200) {
            Message({
              type: 'success',
              message: '提交成功'
            })
            // 刷新列表
            this.getLeaseListData()
          }
        })
        .catch(() => {
        })
    },

    // 获取组织机构和角色列表
    async getDeptAndRolesList() {
      const res = await getOrgApi()
      const result = await getRoleApi({pageNum: 1, pageSize: 100})

      this.orgList = res.data
      this.roleList = result.rows
    }
  },
  mounted() {
    this.getClassAndCompanyData()
    this.getLeaseListData()
    this.getAreaData()
    this.getDeptAndRolesList()
  },
  created() {
    // 表单验证规则
    this.addOrEditFormRules = {
      person: [{required: true, message: '请输入联系人', trigger: 'blur'}],
      leaseName: [{required: true, message: '请输入需求名称', trigger: 'blur'}],
      areaCode: [{required: true, message: '请选择项目所在区/县', trigger: 'change'}],
      cityCode: [{required: true, message: '请选择项目所在市', trigger: 'change'}],
      provinceCode: [{required: true, message: '请选择项目所在省', trigger: 'change'}],
      address: [{required: true, message: '请输入项目详细地址', trigger: 'blur'}],
      companyId: [{required: true, message: '请选择租赁公司', trigger: 'change'}],
      fileInfoList: [{required: true, message: '请上传参考图片', trigger: 'blur'}],
      endTime: [{required: true, message: '请选择需求截止日期', trigger: 'change'}],
      leaseStartTime: [
        {required: true, message: '请选择租赁开始日期', trigger: 'change'},
        {validator: this.checkStartTime, trigger: 'blur'}
      ],
      leaseEndTime: [
        {required: true, message: '请选择需租赁结束日期', trigger: 'change'},
        {validator: this.checkEndTime, trigger: 'blur'}
      ],
      detailsList: [{required: true, message: '请添加需求装备信息', trigger: 'change'}],
      personPhone: [
        {required: true, message: '请输入联系电话', trigger: 'blur'},
        {
          pattern: /^1[3456789]\d{9}$/,
          message: '请输入正确的联系电话',
          trigger: 'blur'
        }
      ],
      isSms: [{required: true, message: '请选择是否短信通知', trigger: 'change'}]
    }

    this.addOrEditDemandFormRules = {
      typeIds: [{required: true, message: '请选择装备类目', trigger: 'change'}],
      leaseNum: [{required: true, message: '请输入预估数量', trigger: 'blur'}]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .upload-tip .el-form-item__label {
  color: transparent;
}

.el-pagination {
  justify-content: flex-end;
  padding: 5px 0;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #3cb4a6;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 6px;
  width: 95%;
}

.img-list {
  display: flex;
  align-items: center;

  .img-items {
    width: 100px;
    height: 100px;
    margin-right: 8px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .mask-img {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        font-size: 20px;
        cursor: pointer;
        z-index: 9;
        color: #fff;
      }
    }
  }

  .img-items:hover .mask-img {
    visibility: visible;
  }
}

.app-container-content {
  ::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;

    .el-dialog__body {
      flex: 1;
      overflow-y: scroll !important;
      padding: 20px 40px;
    }

    .dialog-content {
      padding: 20px;
    }
  }
}

.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;

  ::v-deep .el-card__body {
    padding: 20px !important;
  }
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      /* margin-bottom: 30px; */
    }
  }

  ::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}

.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;

    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.2s ease;

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }

    // 表格边框优化
    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}
</style>

