<template>
  <div class="app-container">

    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">当前施工信息</h2>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="承包商数量">
            <el-input v-model="formData.consNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="分包商数量">
            <el-input v-model="formData.subNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="当前在场人数">
            <el-input v-model="formData.presentNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="特殊工种人数">
            <el-input v-model="formData.specialJobsNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="工器具总数">
            <el-input v-model="formData.equipmentNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="特殊设备数量">
            <el-input v-model="formData.specialEquipmentNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="监理人数">
            <el-input v-model="formData.supervisorNum" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="工程状态">
            <el-select v-model="formData.proStatus" placeholder="请选择工程状态" clearable :style="{width: '100%'}"
                       :disabled="true"
            >
              <el-option v-for="dict in proStatusOptions"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">工程基本信息填写</h2>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="工程名称" style="width: 100%">
            <el-input v-model="formData.proName" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="工程负责人" style="width: 100%">
            <el-input v-model="formData.proLeader" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="负责人联系方式" style="width: 100%">
            <el-input v-model="formData.proLeaderPhone" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="工程类型" style="width: 100%">
            <el-select v-model="formData.proType" placeholder="请选择工程类型" clearable :style="{width: '100%'}"
                       :disabled="true"
            >
              <el-option v-for="dict in proTypeOptions"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="计划开工日期" prop="startDate" style="width: 100%">
            <el-date-picker v-model="formData.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择开工期日计划开工日期"
                            :editable="false" clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="计划竣工日期" prop="endDate">
            <el-date-picker v-model="formData.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :editable="false" :style="{width: '100%'}" placeholder="请选择计划竣工日期" clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.proType == 2">
        <el-col :span="7">
          <el-form-item label-width="120px" label="选择监理单位" prop="supervisorUnitId">
            <el-select v-model="formData.supervisorUnitId" placeholder="请选择监理单位" clearable :disabled="true"
                       :style="{width: '100%'}"
            >
              <el-option v-for="(item,index) in supervisorUnitOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">工程地址配置</h2>
      <el-row>
        <el-form-item
          v-for="(domain, index) in formData.proAddress"
          :label="'工程地址' + (index + 1)"
          label-width="130px"
          :key="domain.key"
          :prop="'proAddress.' + index + '.value'"
          :rules="{
      required: true, message: '请选择工程地址', trigger: 'blur'
    }"
        >
          <el-select v-model="domain.value" placeholder="请选择工程地址" clearable @clear="clearAddress(index)"
                     :style="{width: '26%'}"
                     @change="changeLonLat(domain.value,index)"
          >
            <el-option v-for="(option, i) in proAddressOptions" :key="i" :label="option.label" :value="option.value"
                       :disabled="option.disabled"
            ></el-option>
          </el-select>
          <el-input v-model="domain.lon" placeholder="经度" clearable :disabled="true"
                    :style="{width: '20%',marginLeft:'2%'}" v-no-whitespace
          ></el-input>
          <el-input v-model="domain.lat" placeholder="经度" clearable :disabled="true"
                    :style="{width: '20%',marginLeft:'2%'}" v-no-whitespace
          ></el-input>
          <el-button type="primary" plain size="medium" icon="el-icon-circle-plus" circle :style="{marginLeft:'2%'}"
                     @click="addAddressOption"
          ></el-button>
          <el-button v-if="index !== 0" v-show="true" type="danger" plain icon="el-icon-remove" circle
                     @click="removeAddressOption(domain)"
          ></el-button>
          <el-button v-if="index === 0" v-show="true" type="primary" @click="addAddress">新增地址</el-button>
        </el-form-item>

      </el-row>
      <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">承包商配置</h2>
      <el-row>
        <el-form-item
          v-for="(domain, index) in formData.consArr"
          :label="'选择承包商' + index"
          :key="domain.key"
        >
          <el-col :span="7">
            <el-select v-model="domain.value" placeholder="请选择承包商"  clearable :disabled="true"
                       :style="{width: '100%'}"
                       @change="changeLonLat(domain.value,index)"
            >
              <el-option v-for="(option, i) in consOptions"  :key="i" :label="option.label" :value="option.value"
                         :disabled="option.disabled"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-checkbox-group v-model="domain.checkList"  style="margin-left: 2%;">
              <el-checkbox v-for="(option,index) in materialOptions" :label="option.value" :key="index" disabled>
                {{ option.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
      </el-row>
      <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">其他信息</h2>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="创建人">
            <el-input v-model="formData.createPerson" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="120px" label="创建时间">
            <el-input v-model="formData.createTime" clearable :disabled="true" v-no-whitespace
                      :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :title="'创建工程地址'" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <bns-map
        :items="mapItems"
        v-on:closeMain="closeMain"
      >
      </bns-map>
    </el-dialog>


    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :style="{float:'right',marginLeft:'10px'}" v-preventReClick="5000">提 交</el-button>
      <el-button @click="resetForm" :style="{float:'right'}">取 消</el-button>
    </div>
  </div>

</template>
<script>
import { dictTableOption, selectCons, selectMaterial, selectProAddress, selectSupervisionUnit } from '@/api/tool/select'
import bnsMap from '@/components/pro-tabs/bns-map.vue'
import { selectProInfoDetails, editProInfo } from '@/api/pro/proList'

export default {
  components: { bnsMap },
  props: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 是否显示创建工程地址弹出层
      open: false,
      // 工程地址form表单
      proAddressForm: {},
      //工程地址form表单 校验
      proAddressRules: {
        proAddress: [{
          required: true,
          message: '请输入工程地址',
          trigger: 'blur'
        }],
        lon: [{
          required: true,
          message: '请输入经度',
          trigger: 'blur'
        }],
        lat: [{
          required: true,
          message: '请输入纬度',
          trigger: 'blur'
        }]
      },
      //工程地址
      mapItems: {},
      gutterValue: parseInt('24', 10),
      mainFormFields: [  // 主表单字段定义
        {
          label: '工程地址',
          prop: 'proAddress',
          type: 'select',
          labelWidth: '120px',
          disabled: false,
          options: this.proAddressOptions
        },
        { label: '经度', prop: 'lon', type: 'input', labelWidth: '120px', disabled: true },
        { label: '纬度', prop: 'lat', type: 'input', labelWidth: '120px', disabled: true }
      ],
      formData: {
        // 承包商数量
        consNum: '',
        // 分包商数量
        subNum: '',
        // 当前在场人数
        presentNum: '',
        // 特殊工种人数
        specialJobsNum: '',
        // 工器具总数
        equipmentNum: '',
        // 特殊设备数量
        specialEquipmentNum: '',
        // 监理人数
        supervisorNum: '',
        // 工程状态
        proStatus: '',
        //工程名称
        proName: '',
        //工程负责人
        proLeader: '',
        //工程负责人联系方式
        proLeaderPhone: '',
        //工程类型
        proType: '',
        //开工日期
        startDate: '',
        //竣工日期
        endDate: '',
        //监理单位
        supervisorUnit: '',
        //工程地址
        proAddress: [
          {
            label: '',
            value: '',
            lon: '',
            lat: '',
            key: Date.now()
          }
        ],
        //承包商
        consArr: [],
        //创建人
        createPerson: '',
        //创建时间
        createTime: ''
      },
      //主表单校验
      rules: {
        proName: [{
          required: true,
          message: '请输入工程名称',
          trigger: 'blur'
        }],
        proLeader: [{
          required: true,
          message: '请输入工程负责人',
          trigger: 'blur'
        }],
        proLeaderPhone: [{
          required: true,
          message: '请输入负责人联系方式',
          trigger: 'blur'
        }],
        supervisorUnit: [{
          required: true,
          message: '请选择监理单位',
          trigger: 'change'
        }],
        startDate: [{
          required: true,
          message: '请选择开工期日计划开工日期',
          trigger: 'change'
        }],
        endDate: [{
          required: true,
          message: '请选择计划竣工日期',
          trigger: 'change'
        }],
        proType: [{
          required: true,
          message: '请选择工程类型',
          trigger: 'change'
        }]
      },
      //工程类型下拉选
      proTypeOptions: [],
      proStatusOptions: [],
      //监理单位下拉选
      supervisorUnitOptions: [],
      //承包商下拉选
      consOptions: [],
      //材料选项
      materialOptions: [],
      //工程地址选项
      proAddressOptions: [],
      paramsData: {},
      proId:''
    }
  },
  created() {
    this.proId = this.$route.params && this.$route.params.proId;
    this.getProType()
    this.getStatus()
    this.getProAddress()
    this.getCons()
    this.getMaterial()
    this.getSupervisionUnit()
    this.getData(this.proId)
  },
  mounted() {
  },
  watch: {
    open: {
      handler(newVal, oldVal) {
        // 在 mapItems 数据变化后，关闭 el-dialog
        if (newVal === false) {
          // 或者其他关闭对话框的逻辑
          this.getProAddress()
        }
      },
      deep: true // 监听对象或数组的变化
    }
  },
  methods: {
    //获取工程类型
    getProType() {
      const params = {
        dictType: 'sys_pro_type',
        dictValue: ''
      }
      dictTableOption(params).then(response => {
        this.proTypeOptions = response.data
      })
    },
    //获取工程类型
    getStatus() {
      const params = {
        dictType: 'sys_pro_status',
        dictValue: ''
      }
      dictTableOption(params).then(response => {
        this.proStatusOptions = response.data
      })
    },
    //获取工程地址选项
    getProAddress() {
      const params = {}
      selectProAddress(params).then(response => {
        this.proAddressOptions = response.data
      })
    },
    //获取承包商选项
    getCons() {
      const params = {}
      selectCons(params).then(response => {
        this.consOptions = response.data
      })
    },
    //获取材料选项
    getMaterial() {
      const params = {}
      selectMaterial(params).then(response => {
        this.materialOptions = response.data
      })
    },
    //获取监理单位选项
    getSupervisionUnit() {
      const params = {}
      selectSupervisionUnit(params).then(response => {
        console.log(response)
        this.supervisorUnitOptions = response.data
      })
    },
    getData(proId) {
      this.loading = true
      // TODO 获取数据
      selectProInfoDetails(proId).then(response => {
        console.log(response)
        this.formData = response.projectInfo[0]
        this.loading = false
      })
    },
    //提交工程表单
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        console.log(valid)
        console.log(this.formData)
        if (!valid) {
          return false
        }else{
          if (this.hasDuplicates(this.formData.proAddress,'label')){
            this.$message({
              message: '工程地址不能重复',
              type: 'error'
            })
            return false
          }
          editProInfo(this.formData).then(response => {
            if (response.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              //关闭tab页
              this.$tab.closePage()
            }
          })
        }
        // TODO 提交表单
      })
    },
    /**
     * 判断对象数组中的数据是否重复
     * @param arr
     * @param key
     * @returns {boolean}
     */
    hasDuplicates(arr, key) {
      const seen = new Set()
      for (const item of arr) {
        if (seen.has(item[key])) {
          return true
        }
        seen.add(item[key])
      }
      return false
    },
    //工程表单重置
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$tab.closePage()
    },
    //工程地址表单重置
    proAddressReset() {
      this.form = {
        proAddress: undefined,
        lon: undefined,
        lat: undefined
      }
      this.resetForm('proAddressForm')
    },
    //工程地址表单重置
    proAddressCancel() {
      this.proAddressReset()
      this.open = false
    },
    //新增工程地址
    addAddress() {
      // this.proAddressCancel();
      this.open = true
      this.mapItems = { addressId: -1, open: 'true' }
    },
    //添加工程地址选项
    addAddressOption() {
      this.formData.proAddress.push({
        label: '',
        value: '',
        lon: '',
        lat: '',
        key: Date.now()
      })
    },
    //移除工程地址选项
    removeAddressOption(item) {
      const i = this.formData.proAddress.indexOf(item)
      if (i !== -1) {
        this.formData.proAddress.splice(i, 1)
      }
    },
    //更改工程地址选项   同时修改对应的经纬度
    changeLonLat(e, index) {
      if (e === undefined || e === '') {
        return
      }
      for (let i = 0; i < this.proAddressOptions.length; i++) {
        const item = this.proAddressOptions[i]
        if (e === item.value) {
          this.formData.proAddress[index].label = item.label
          this.formData.proAddress[index].value = item.value
          this.formData.proAddress[index].lon = item.lon
          this.formData.proAddress[index].lat = item.lat
        }
      }
    },
    clearAddress(index) {
      this.formData.proAddress[index].lon = ''
      this.formData.proAddress[index].lat = ''
    },
    closeMain() {
      this.open = false
      console.log('closeMain')
    }
  }
}

</script>
<style>
</style>
