<template>
  <div>
    <div class="dialog-h-content scroll-h">

      <el-form ref="ref_form"
               :inline="true"
               :model="formData"
               :rules="dataRule"
               :disabled="formType === 'detail'"
               class="form">

        <el-form-item label="场所区域"
                      prop="gridId"
                      label-width="150px"
                      style="display: block">
          <el-select class="item_width_1"
                     v-model="formData.gridId"
                     placeholder="全部"
                     clearable>
            <el-option v-for="item in gridList"
                       @click.native="handleChangeGrid"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="场所类型"
                      label-width="150px"
                      prop="ninePlaceVal">
          <el-select class="item_width_1"
                     v-model="formData.ninePlaceVal"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in placeTypeList"
                       @click.native="handleChangeType"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="场所名称"
                      label-width="150px"
                      prop="placeOrgId">
          <el-select class="item_width_1"
                     v-model="formData.placeOrgId"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in placesList"
                       :key="item.placeOrgId"
                       :label="item.placeOrgName"
                       :value="item.placeOrgId">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="分队名称"
                      label-width="150px"
                      prop="placePatrolTeamId">
          <el-select class="item_width_1"
                     v-model="formData.placePatrolTeamId"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="(item,index) in teamsList"
                       @click.native="hancleChangeTeam(index)"
                       :key="item.teamId"
                       :label="item.teamName"
                       :value="item.teamId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="检查人员"
                      prop="inspectorArray"
                      label-width="150px"
                      style="display: block">
          <el-checkbox-group class="item_width_1"
                             style="display:flex;flex-wrap:wrap"
                             v-model="formData.inspectorArray">
            <el-checkbox v-for="item in inspectorsList"
                         :key="item.id"
                         :label="item.id">{{item.name}}</el-checkbox>

          </el-checkbox-group>

        </el-form-item>
        <el-form-item label="首次巡查时间"
                      style="display: block"
                      prop="firstTime"
                      label-width="150px">
          <el-date-picker v-model="formData.firstTime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="隐患明细"
                      prop="detailed"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_1"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    placeholder="请输入备注，不超过500字"
                    v-model="formData.detailed"></el-input>
        </el-form-item>

        <el-form-item label="首次检查结论"
                      prop="firstResult"
                      label-width="150px"
                      style="display: block">
          <el-select class="item_width_1"
                     v-model="formData.firstResult"
                     placeholder="全部"
                     clearable>
            <el-option v-for="item in resultList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="拟复查时间"
                      style="display: block"
                      prop="reviewTime"
                      label-width="150px">
          <el-date-picker v-model="formData.reviewTime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

    </div>
    <div class="div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>
      <el-button size="small"
                 v-if="formType != 'detail'"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

let loading // 加载动画
export default {
  data () {
    return {
      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
      btnDisable: false,

      placesList: [],//场景列表
      teamsList: [],//分队列表
      inspectorsList: [],//检查人员列表

      placePatrolRecordId: '',
      formData: {
        gridId: '',//网格Id	
        ninePlaceVal: '',//九小场所类型value值	
        placeOrgId: '',//场所下的组织Id-场所名称	
        placePatrolTeamId: '',//场所下分队Id	
        inspectorArray: [],//检查人员数组
        inspectors: '',//检查人员Id，逗号分隔
        firstTime: '',//首次巡查时间	
        detailed: '',//隐患明细	
        firstResult: '',//首次检查结果【0:合格 1:不合格】	
        reviewTime: '',//拟复查时间	
      },

    }
  },
  components: {},
  mounted () {

  },

  methods: {

    async initForm (type, placePatrolRecordId) {
      this.$refs.ref_form.resetFields();
      this.startLoading()
      await this.loadPlaces()
      await this.loadTeams()

      this.formType = type
      if (placePatrolRecordId) {
        this.placePatrolRecordId = placePatrolRecordId
        this.formData.placePatrolRecordId = placePatrolRecordId
        await this.loadFormData()
        await this.loadInspectors()
      }
      this.endLoading()
    },

    //改变场所区域
    handleChangeGrid () {
      this.formData.placeOrgId = ''
      this.loadPlaces()
    },

    //改变场所类型
    handleChangeType () {
      this.formData.placeOrgId = ''
      this.loadPlaces()
    },


    //加载场所
    async loadPlaces () {
      const url = '/gov/org/placeorg/getlist'

      let params = {
        gridId: this.formData.gridId,//场所区域【网格Id】	
        ninePlaceVal: this.formData.ninePlaceVal,//场所类型【九小场所Value值】	
        isPage: false
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.placesList = data.list

      } else {
        this.$message.error(msg)
      }
    },


    //加载分队
    async loadTeams () {
      const url = '/gov/org/placepatrolteam/getlist'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolteam/getlist'
      let params = {
        isPage: false
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.teamsList = data.list
        if (this.teamsList.length > 0) {
          this.formData.placePatrolTeamId = this.teamsList[0].teamId

          this.hancleChangeTeam(0)
        }

      } else {
        this.$message.error(msg)
      }
    },

    //点击分队切换人员
    async hancleChangeTeam (index) {
      let array = []
      this.formData.inspectorArray = [...array]
      // this.formData.placePatrolTeamId = this.teamsList[index].teamId
      await this.loadInspectors()
    },

    //加载分队下人员
    async loadInspectors () {
      const url = '/gov/org/placepatrolteamstaff/getlist'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolteamstaff/getlist'
      let params = {
        teamId: this.formData.placePatrolTeamId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.inspectorsList = data

      } else {
        this.$message.error(msg)
      }
    },
    //加载form
    async loadFormData () {
      const url = '/gov/org/placepatrolrecord/detail'

      let params = {
        placePatrolRecordId: this.placePatrolRecordId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        data.inspectorArray = data.inspectors.split(',')
        this.formData = { ...data }



      } else {
        this.$message.error(msg)
      }
    },


    async handleComfirm () {

      this.btnDisable = true
      setTimeout(() => {
        this.btnDisable = false
      }, 10000)
      this.$refs['ref_form'].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj)
          this.btnDisable = false
        } else {
          this.addRecord()
        }

      })

    },
    async addRecord () {

      let url = "/gov/org/placepatrolrecord/add"
      // let url = "http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolrecord/add"
      this.formData.inspectors = this.formData.inspectorArray.join(',')

      const { data, code, msg } = await requestPost(url, this.formData)

      if (code === 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.resetData()
        this.$emit('dialogOk')
        this.btnDisable = false
      } else {
        this.btnDisable = false
        this.$message.error(msg)
      }

    },

    handleCancle () {

      this.resetData()
      this.$emit('dialogCancle')

    },

    resetData () {
      this.formData = {
        gridId: '',//网格Id	
        ninePlaceVal: '',//九小场所类型value值	
        placeOrgId: '',//场所下的组织Id-场所名称	
        placePatrolTeamId: '',//场所下分队Id	
        inspectorArray: [],//检查人员数组
        inspectors: '',//检查人员Id，逗号分隔
        firstTime: '',//首次巡查时间	
        detailed: '',//隐患明细	
        firstResult: '',//首次检查结果【0:合格 1:不合格】	
        reviewTime: '',//拟复查时间	
      }
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {

        gridId: [
          { required: true, message: '场所网格不能为空', trigger: 'blur' }
        ],
        ninePlaceVal: [
          { required: true, message: '场所类型不能为空', trigger: 'blur' },
        ],
        placeOrgId: [
          { required: true, message: '场所名称不能为空', trigger: 'blur' }
        ],
        placePatrolTeamId: [
          { required: true, message: '分队不能为空', trigger: 'blur' }
        ],

        inspectorArray: [
          { required: true, message: '巡检人员不能为空', trigger: 'blur' }
        ],
        firstTime: [
          { required: true, message: '首次巡查时间不能为空', trigger: 'blur' }
        ],
        detailed: [
          { required: true, message: '隐患明细不能为空', trigger: 'blur' }
        ],
        firstResult: [
          { required: true, message: '首次巡查结果不能为空', trigger: 'blur' }
        ]
      }
    },

  },
  props: {

    gridList: {
      type: Array,
      default: []
    },
    resultList: {
      type: Array,
      default: []
    },
    placeTypeList: {
      type: Array,
      default: []
    },
  }
}
</script>

<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>

