<template>
  <div class="app-container">
    <el-form :model="work">
      <el-form-item label="工作内容">
        {{ row.content }}
      </el-form-item>
      <el-form-item label="工作类别">
        <el-select v-model="work.workType" :style="{ width: '100%' }" @change="getWorkItemList(work, work.workType)">
          <el-option v-for="item in workSelect.workTypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作项目">
        <el-select v-model="work.workItem" :style="{ width: '100%' }" :remote="true"
          @change="getScaleGradeList(work, work.workItem)">
          <el-option v-for="item in workSelect.workItemList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="等级或比例尺">
        <el-select v-model="work.scaleGrade" :style="{ width: '100%' }"
          @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
          <el-option v-for="item in workSelect.scaleGradeList" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地类">
        <el-select v-model="work.groundType" :style="{ width: '100%' }"
          @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
          <el-option key="一般地类" label="一般地类" value="0">
          </el-option>
          <el-option key="复杂地类" label="复杂地类" value="1">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单价">
        {{ work.price }} / {{ work.unit }}
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" @click="$emit('getPrice', work)">确定</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </el-row>
    <div class="mt20">
      <el-alert :closable="false" title="系数备注" type="success">
        <h2 v-html="priceRemark"></h2>
      </el-alert>
      
    </div>

  </div>
</template>

<script>
import { getWorkTypeList, getWorkItemList, getSubItemList, getScaleGradeList, getUnitPrice, getPrice } from '@/api/oa/price/price'
import { getPriceRemarkByWorkType } from '@/api/oa/price/price'
export default {
  props: {
    row: {
      type: Object,
      require: true
    }
  },
  watch: {
    row(val) {
      this.getPriceById()
    },
    'work.workType'(val) {
      getPriceRemarkByWorkType({ workType: val }).then(res => {
        this.priceRemark = res.msg
      })
    }
  },
  data() {
    return {
      work: {},
      workSelect: {
        workTypeList: [],
        workItemList: [],
        scaleGradeList: []
      },
      priceRemark: ""
    }
  },
  mounted() {
    this.getPriceById();
    this.getWorkTypeList()
  },
  methods: {
    // 根据id获取单价
    getPriceById() {
      if (this.row.priceId) {
        getPrice(this.row.priceId).then(res => {
          if (res.data) {
            this.setValue(this.work, 'workType', res.data.workType)
            this.setValue(this.work, 'workItem', res.data.workItem)
            this.setValue(this.work, 'scaleGrade', res.data.scaleGrade)
            this.setValue(this.work, 'unit', res.data.unit)
            this.setValue(this.work, 'groundType', this.row.groundType)
            this.setValue(this.work, 'price', this.row.price)
            getWorkItemList({ workType: res.data.workType }).then(res => {
              if (res) {
                let workItemList = this.setArray(res);
                this.workSelect.workItemList = workItemList;
              }
            })
            getScaleGradeList({ workItem: res.data.workItem }).then(res => {
              let scaleGradeList = this.setArray(res);
              this.workSelect.scaleGradeList = scaleGradeList;
            })
            getPriceRemarkByWorkType({ workType: res.data.workType }).then(res => {
              this.priceRemark = res.msg
            })
          }
        })
      } else {
        this.work = {}
      }
    },
    /* 获取工作类别 */
    getWorkTypeList() {
      getWorkTypeList().then(res => {
        if (res) {
          this.setValue(this.workSelect, 'workTypeList', this.setArray(res));
        }
      });
    },
    /* 获取工作项目 */
    getWorkItemList(work, workType) {
      getWorkItemList({ workType: workType }).then(res => {
        if (res) {
          let workItemList = this.setArray(res);
          this.workSelect.workItemList = workItemList;
          work.workItem = workItemList[0].label;
          work.subItem = '';
          this.getScaleGradeList(work, work.workItem);
        }
      })
    },
    /* 获取比例尺 */
    getScaleGradeList(work, workItem) {
      if (work.scale) {
        this.setValue(work, 'scaleGrade', work.scale);
        if (work.groundType == undefined) {
          this.setValue(work, 'groundType', '0');
        }
        this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
      } else {
        getScaleGradeList({ workItem }).then(res => {
          if (res) {
            let scaleGradeList = this.setArray(res);
            this.workSelect.scaleGradeList = scaleGradeList;
            this.setValue(work, 'scaleGrade', scaleGradeList[0].label)
            // work.scaleGrade = scaleGradeList[0].label;
            if (work.scaleGrade == undefined) {
              this.setValue(work, 'scaleGrade', '');
            }
            if (work.groundType == undefined) {
              this.setValue(work, 'groundType', '0');
            }
            this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
          }
        })
      }

    },
    /* 获取单价 */
    getUnitPrice(work, workItem, subItem, scaleGrade, groundType) {
      getUnitPrice({ workItem, subItem, scaleGrade, groundType: groundType }).then(res => {
        let content = work.workType + '/' + workItem
        if (res.length != 0) {
          work.priceId = res.data.id;
          this.setValue(work, 'price', res.data.price)
          this.setValue(work, 'unit', res.data.unit)
          this.work.content = content
        }
      })
    },

    setValue(key, name, val) {
      this.$set(key, name, val)
    },
    //数组去重
    setArray(arr) {
      if (arr != [] && arr != undefined) {
        let datalist = [...new Set(arr)];
        let list = [];
        for (let i of datalist) {
          let obj = new Object();
          obj.label = i;
          obj.value = i;
          list.push(obj);
        }
        return list;
      } else {
        return [];
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.remark {
  color: #409EFF;
}
</style>