<!--创建事件-->
<template>
  <div ref="caseContainer" class="case-container">
    <!--表单-->
    <div v-show="!showMap" class="form-div">
      <el-form ref="form" :model="form" :size="inputSize" :rules="rules" label-width="80px">
        <div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="事件编号" prop="caseId">
                <el-input v-model="form.caseId" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录音编号" prop="sound">
                <el-input v-model="form.sound" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来电时间" prop="callTime" disabled>
                <el-input v-model="form.callTime"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="联系电话" prop="reporterPhone">
                <el-input v-model="form.reporterPhone" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人" prop="reporterName">
                <el-input v-model="form.reporterName"/>
              </el-form-item>
            </el-col>
            <el-button v-if="allowAdd" :disabled="form.reporterName==''||form.reporterPhone==''" type="primary" size="small" @click="addToCustomerList">添加到通讯录</el-button>
          </el-row>
          <el-row>
            <el-form-item label="事件类型" prop="type" required>
              <el-col :span="6">
                <el-select v-model="form.type.eorc" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select v-model="form.type.caseTypeCode" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item of caseTypeList" :key="'case_'+item.id" :label="item.typeName" :value="item.typeCode"/>
                </el-select>
              </el-col>
              <!--<el-col :span="6">-->
              <!--<el-select v-model="form.type.caseDetailTypeCode" placeholder="请选择" style="width: 100%" clearable>-->
              <!--<el-option v-for="item of caseDetailTypeList" :key="'casedetail_'+item.id" :label="item.typeDetailName" :value="item.typeDetailCode"/>-->
              <!--</el-select>-->
              <!--</el-col>-->
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="事件来源" prop="source">
                <el-select v-model="form.source" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item of caseSourceList" :key="'source_'+item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急程度" prop="caseLevel">
                <el-select v-model="form.caseLevel" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item of caseLevelList" :key="'caselevel_'+item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="办理期限" prop="limitedTime">
                <el-date-picker
                  v-model="form.limitedTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择时间"
                  style="width: 100%"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="事件地址" prop="address" required>
              <el-col :span="5">
                <el-select v-model="form.address.areaCode" placeholder="选择所在区" value="" style="width: 100%">
                  <!--<el-option key="99" label="蓉江新区" value="99"/>-->
                  <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select v-model="form.address.streetCode" placeholder="选择所在街道" value="" style="width: 100%">
                  <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-col>
              <!--<el-col :span="5">-->
              <!--<el-select v-model="form.address.communityCode" placeholder="选择所在社区" value="" style="width: 100%">-->
              <!--<el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.id"/>-->
              <!--</el-select>-->
              <!--</el-col>-->
              <el-col :span="5">
                <el-input v-model="form.address.fieldintro" placeholder="详细地址"/>
              </el-col>
              <el-button type="primary" size="small" style="margin-left: 10px" @click="showMapDiv">地图选点</el-button>
              <span v-show="form.lng!='0'" style="font-size:9px;">({{ form.lng }},{{ form.lat }})</span>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="事件标题" prop="title">
                <el-input v-model="form.title" maxlength="100"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="checkbox">
                <el-checkbox v-model="form.isTypical" true-label="1" false-label="0">典型案例</el-checkbox>
              </div>
              <div class="checkbox">
                <el-checkbox v-model="form.isImportant" true-label="1" false-label="0">要情</el-checkbox>
              </div>
              <div class="checkbox">
                <el-checkbox v-model="form.isReturnVisit" true-label="1" false-label="0">需要回访</el-checkbox>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="事件内容" prop="description">
                <el-input
                  v-model="form.description"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  type="textarea"
                  maxlength="255"
                  placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="处理方式" prop="processWay">
                <el-radio-group v-model="form.processWay">
                  <el-radio v-for="item in processWayList" :disabled="form.caseLevel&&form.caseLevel=='2'&&item.nextState!=6" :key="'process_'+item.id" :label="item.nextState">{{ item.nextOperation }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="20">-->
          <!--<el-col :span="10">-->
          <!--<el-form-item label="处理单位" prop="processDept">-->
          <!--<dept-select/>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="10">-->
          <!--<el-form-item label="处理人" prop="processUser">-->
          <!--<el-select v-model="form.processUser" placeholder="选择处理人" value="" style="width: 100%">-->
          <!--<el-option v-for="item in userList" :key="item.id" :label="item.name" value="item.id"/>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <!--</el-row>-->
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="24">
              <div style="text-align: center">
                <el-button :size="inputSize" :loading="submitLoading" type="primary" @click="submit">提交</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <!-- 知识库检索-->
    <div v-show="!showMap" class="knowledge-div">
      <knowledge-search/>
    </div>
    <!-- 地图显示 -->
    <div v-show="showMap" id="map" :style="{ height: mapHeight }">
      <el-row :gutter="20" type="flex" style="margin-top: -30px; margin-bottom: 10px;">
        <el-col :span="6">
          <el-input v-model="keyword" placeholder="兴趣点筛选" size="small"/>
        </el-col>
        <el-col :span="14">
          <el-button size="small" type="primary" @click="queryPoi">查询</el-button>
          <el-button size="small" type="primary" style="margin-left: 15px;" @click="confirmPos">确定</el-button>
          <span>说明：双击添加位置, </span>
          <span>当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button size="small" type="info" @click="clearMap">清除地图</el-button>
          <el-button size="small" @click="backToForm">返回</el-button>
        </el-col>
      </el-row>
      <f-map ref="mapComp" type="vector" @ready="mapReady"/>
    </div>
  </div>
</template>

<script>
import KnowledgeSearch from './components/knowledgeSearch'
import { addCustomer } from '@/api/customer'
import { getToday } from '@/utils/dateutils'
import { getEorc, getCaseSource, getCaseLevel } from '@/api/allDict'
import { getCaseType, getCaseDetailType, addCase } from '@/api/callCase'
import { getNextNodeList } from '@/api/process'
import { getAreaList } from '@/api/system/area'
import { getCustomerList } from '@/api/customer'
import FMap from '@/components/fMap/components/fMap'

export default {
  name: 'CreateCase',
  components: { KnowledgeSearch, FMap },
  data() {
    const validateAddress = function(rule, value, callback) {
      console.log(value)
      // if (value.areaCode === '' || value.streetCode === '' || value.communityCode === '') {
      if (value.areaCode === '' || value.streetCode === '' || value.fieldintro.trim() === '') {
        callback(new Error('地址需填写完整'))
      } else {
        callback()
      }
    }
    const validateType = function(rule, value, callback) {
      console.log(value)
      if (value.eorc === '' || value.caseTypeCode === '' || value.caseDetailTypeCode === '') {
        callback(new Error('请选择事件类型'))
      } else {
        callback()
      }
    }
    return {
      form: {
        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
        sound: '', // 来电录音编号
        callTime: '', // 来电时间
        reporterName: '', // 事件联系人
        reporterPhone: '', // 时间联系人电话
        type: {
          eorc: '', // 案卷类别
          caseTypeCode: '', // 案卷大类编码
          caseDetailTypeCode: '' // 案卷小类编码
        }, // 案卷类别
        source: '3', // 来源
        address: {
          areaCode: '99', // 区域ID
          streetCode: '', // 街道ID
          communityCode: '', // 社区ID
          gridId: '', // 网格ID
          fieldintro: '' // 事件地址
        },
        caseLevel: '', // 案卷紧急程度
        isTypical: '0', // 是否典型案例
        isImportant: '0', // 是否要情
        isReturnVisit: '1', // 是否需要回访
        title: '', // 事件标题
        description: '', // 事件内容
        limitedTime: '', // 事件办理期限
        processWay: '', // 处理方式
        processDept: '', // 处理单位
        processUser: '', // 处理人
        lng: '', // 事件经度
        lat: '' // 事件纬度
      },
      currentPosition: {
        lng: '0',
        lat: '0'
      },
      allowAdd: true, // 允许新增联系人
      addLoading: false, // 添加允许等待
      submitLoading: false,
      reportersList: [], // 联系人选择列表
      eorcList: [], // 案卷类别
      caseTypeList: [], // 案卷类别二级
      caseDetailTypeList: [], // 案卷类别三级
      areaList: [], // 区域列表
      streetList: [], // 街道列表
      communityList: [], // 社区列表
      gridList: [], // 网格列表
      caseLevelList: [], // 紧急程度字典
      processWayList: [], // 是否列表
      caseSourceList: [],
      userList: [], // 处理人列表
      inputSize: 'small', // 按钮样式
      fmap: null, // 地图
      showMap: false, // 是否显示地图
      mapHeight: '0px',
      keyword: '',
      rules: {
        caseId: [{ required: true, message: '事件编号不能为空', trigger: ['blur'] }],
        sound: [{ required: true, message: '来电录音编号不能为空', trigger: ['blur'] }],
        callTime: [{ required: true, message: '来电时间不能为空', trigger: ['blur'] }],
        reporterName: [{ required: false, message: '联系人姓名不能为空', trigger: ['blur'] }],
        reporterPhone: [{ required: true, message: '联系电话不能为空', trigger: ['blur'] }],
        areaCode: [{ required: true, message: '事件辖区必选', trigger: ['blur'] }],
        source: [{ required: true, message: '事件来源必选', trigger: ['blur', 'change'] }],
        caseLevel: [{ required: true, message: '紧急程度必选', trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '事件类型必选', trigger: ['blur'], validator: validateType }],
        caseDetailTypeCode: [{ required: true, message: '事件类型必选', trigger: ['blur'] }],
        description: [{ required: false, message: '事件内容不能为空', trigger: ['blur'] }],
        title: [{ required: true, message: '事件标题不能为空', trigger: ['blur', 'change'] }],
        address: [{ required: true, message: '地址需填写完整', trigger: ['blur'], validator: validateAddress }],
        processWay: [{ required: true, message: '处理方式必选', trigger: ['blur', 'change'] }]
      } // 表单验证
    }
  },
  watch: {
    'form.type.eorc': function(val) {
      if (val === '') {
        this.form.type.caseTypeCode = ''
        this.form.type.caseDetailTypeCode = ''
      } else {
        this.form.type.caseTypeCode = ''
        this.form.type.caseDetailTypeCode = ''
        this.fetchCaseTypeList()
      }
    },
    'form.type.caseTypeCode': function(val) {
      if (val === '') {
        this.form.type.caseDetailTypeCode = ''
      } else {
        this.form.type.caseDetailTypeCode = ''
        this.fetchCaseDetailTypeList()
      }
    },
    'form.address.areaCode': function(val) {
      if (val === '') {
        this.form.address.streetCode = ''
        this.form.address.communityCode = ''
      } else {
        this.fetchStreetList()
      }
    },
    'form.address.streetCode': function(val) {
      if (val === '') {
        this.form.address.communityCode = ''
      } else {
        this.fetchCommunityList()
      }
    }
  },
  created() {
    this.fetchCaseSourceList()
    this.fetchCaseLevelList()
    this.fetchEorcList()
    this.fetchAreaList()
    this.fetchStreetList()
    this.fetchProcessWayList()
  },
  methods: {
    // 提交
    submit() {
      this.submitLoading = true
      this.$refs['form'].validate((valid) => {
        if (valid && this.twiceValidate()) {
          // 初步校验通过
          const form = {
            caseId: this.form.caseId, // 案卷编号，年月日时分秒毫秒+坐席号
            sound: this.form.sound, // 来电录音编号
            callTime: this.form.callTime, // 来电时间
            reporterName: this.form.reporterName, // 事件联系人
            reporterPhone: this.form.reporterPhone, // 时间联系人电话
            eorc: this.form.type.eorc, // 案卷类别
            caseTypeCode: this.form.type.caseTypeCode, // 案卷大类编码
            caseDetailTypeCode: this.form.type.caseDetailTypeCode, // 案卷小类编码
            source: this.form.source, // 来源
            areaCode: this.form.address.areaCode, // 区域ID
            streetCode: this.form.address.streetCode, // 街道ID
            communityCode: this.form.address.communityCode, // 社区ID
            gridId: this.form.address.gridId, // 网格ID
            fieldintro: this.form.address.fieldintro, // 事件地址
            caseLevel: this.form.caseLevel, // 案卷紧急程度
            isTypical: this.form.isTypical, // 是否典型案例
            isImportant: this.form.isImportant, // 是否要情
            isReturnVisit: this.form.isReturnVisit, // 是否需要回访
            title: this.form.title, // 事件标题
            description: this.form.description, // 事件内容
            limitedTime: this.form.limitedTime, // 事件办理期限
            processWay: '' + this.form.processWay, // 处理方式
            processDept: this.form.processDept, // 处理单位
            processUser: this.form.processUser, // 处理人
            lng: this.form.lng, // 事件经度
            lat: this.form.lat // 事件纬度
          }
          addCase(form).then(response => {
            if (response.code === 200) {
              this.$message.success('新建成功')
              this.$emit('cancel')
              this.submitLoading = false
            }
          }).catch(_ => {
            this.$emit('cancel')
            this.submitLoading = false
          })
        } else {
          this.submitLoading = false
        }
      })
    },
    // 二次校验
    twiceValidate() {
      debugger
      const judge = this.form.processWay === 6 && (this.form.lng === '0' || this.form.lat === '0')
      if (judge) {
        this.$message.warning('请在地图上选点')
        return false
      } else {
        return true
      }
    },
    // 初始化数据
    initData(data) {
      this.form = {
        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
        sound: data.callid, // 来电录音编号
        callTime: data.dialStartStamp, // 来电时间
        reporterName: '', // 事件联系人
        reporterPhone: data.number, // 时间联系人电话
        type: {
          eorc: '', // 案卷类别
          caseTypeCode: '', // 案卷大类编码
          caseDetailTypeCode: '' // 案卷小类编码
        }, // 案卷类别
        source: '3', // 来源
        address: {
          areaCode: '99', // 区域ID
          streetCode: '', // 街道ID
          communityCode: '', // 社区ID
          gridId: '', // 网格ID
          fieldintro: '' // 事件地址
        },
        lng: '0',
        lat: '0',
        caseLevel: '', // 案卷紧急程度
        isTypical: '0', // 是否典型案例
        isImportant: '0', // 是否要情
        title: '', // 事件标题
        description: '', // 事件内容
        limitedTime: '', // 事件办理期限
        processWay: '', // 处理方式
        processDept: '', // 处理单位
        processUser: '' // 处理人
      }
      // 清除校验
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.generateCaseId()
      // 根据电话去查找人
      if (this.form.reporterPhone) {
        this.fetchReporter(this.form.reporterPhone)
      }
      // this.$refs.mapComp.initMap()
    },
    // 将客户添加到通讯录
    addToCustomerList() {
      this.addLoading = true
      const customerForm = {
        name: this.form.reporterName, // 姓名
        tel1: this.form.reporterPhone // 联系方式1
      }
      // 如果信息完整, 添加到通讯录
      if (this.allowAdd && customerForm.tel1 && customerForm.name) {
        this.$confirm(
          '确定要将该客户添加到客户列表吗？',
          '确认操作',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          addCustomer(customerForm).then(response => {
            if (response.code === 200) {
              this.$message.success('添加成功')
              this.allowAdd = false
            }
          }).catch(_ => { // 异常情况，loading置为false
            this.addLoading = false
          })
        })
      } else {
        this.$message.warning('请确保联系人姓名和电话完整性')
      }
    },
    // 根据电话去找人
    fetchReporter(phone) {
      const params = {
        tel: phone
      }
      getCustomerList(params).then(response => {
        if (response.code === 200 && response.data) {
          if (response.data.total === 1) {
            this.form.reporterName = response.data.rows[0].name
            this.allowAdd = false
          } else {
            this.allowAdd = true
          }
        }
      })
    },
    // 获取联系人列表
    fetchReportersList() {
      const params = {
        limit: 10000,
        offset: 1
      }
      getCustomerList(params).then(response => {
        if (response.code === 200) {
          this.reportersList = response.data.rows
        }
      })
    },
    // 案卷来源列表
    fetchCaseSourceList() {
      getCaseSource().then(response => {
        if (response.code === 200) {
          this.caseSourceList = response.data
        }
      })
    },
    // 案卷等级列表
    fetchCaseLevelList() {
      getCaseLevel().then(response => {
        if (response.code === 200) {
          this.caseLevelList = response.data
        }
      })
    },
    // 大类列表
    fetchEorcList() {
      getEorc().then(response => {
        if (response.code === 200) {
          this.eorcList = response.data
        }
      })
    },
    // 二级类型列表
    fetchCaseTypeList() {
      getCaseType(this.form.type.eorc).then(response => {
        this.caseTypeList = response.data
      })
    },
    // 三级类型列表
    fetchCaseDetailTypeList() {
      // 遍历caseTypeList根据code获取大类的ID，进行级联查询
      // let typeId = 0
      // this.caseTypeList.forEach(item => {
      //   if (item.typeCode === this.form.type.caseTypeCode) {
      //     typeId = item.id
      //   }
      // })
      // if (typeId > 0) {
      //   getCaseDetailType( this.form.type.caseTypeCode).then(response => {
      //     this.caseDetailTypeList = response.data
      //   })
      // }
      getCaseDetailType(this.form.type.caseTypeCode).then(response => {
        this.caseDetailTypeList = response.data
        this.form.type.caseDetailTypeCode = this.caseDetailTypeList[0].typeDetailCode
      })
    },
    // 区列表
    fetchAreaList() {
      getAreaList('0').then(response => {
        this.areaList = response.data
      })
    },
    // 街道列表
    fetchStreetList() {
      getAreaList(this.form.address.areaCode).then(response => {
        this.streetList = response.data
      })
    },
    // 社区列表
    fetchCommunityList() {
      getAreaList(this.form.address.streetCode).then(response => {
        this.communityList = response.data
      })
    },
    // 获取处理方式列表
    fetchProcessWayList() {
      getNextNodeList('0').then(response => {
        this.processWayList = response.data
      })
    },
    fetchGridList() {},
    // 自动生成案卷编号，时间+坐席号
    generateCaseId() {
      const id = getToday('yyMMddhhmmss')
      const seat = this.$store.getters.seat
      this.form.caseId = id + seat
    },
    // 地图准备好后的操作
    mapReady({ fmap }) {
      this.fmap = fmap
      // 禁用双击放大
      this.fmap.deactivateDbClickZoom()
      const that = this
      // 添加双击事件,在地图上添加点
      this.fmap.on('fmap.map.dbclick', function(event) {
        that.fmap.clearLayer('case')
        const marker = {
          lon: event.coordinate[0],
          lat: event.coordinate[1],
          layer: 'case'
        }
        that.currentPosition.lng = marker.lon.toFixed(8) + ''
        that.currentPosition.lat = marker.lat.toFixed(8) + ''
        that.fmap.addFeatures([marker], { xField: 'lon', yField: 'lat', layer: 'case' })
        // that.fmap.navigate2Center([marker.lon, marker.lat])
      })
    },
    // 显示地图
    showMapDiv() {
      this.showMap = true
      this.$refs.mapComp.initMap()
      this.mapHeight = this.$refs.caseContainer.offsetHeight + 'px'
    },
    // 查询兴趣点
    queryPoi() {
      if (this.keyword === '') {
        this.$message.warning('请输入关键字')
      } else {
        this.$refs.mapComp.queryPoi(this.keyword)
      }
    },
    // 确定, 保存坐标并返回
    confirmPos() {
      this.form.lng = this.currentPosition.lng
      this.form.lat = this.currentPosition.lat
      this.showMap = false
      this.clearMap()
      console.log(this.form)
    },
    // 清除地图
    clearMap() {
      this.currentPosition.lng = '0'
      this.currentPosition.lat = '0'
      this.$refs.mapComp.clearMap()
    },
    // 返回到事件详情
    backToForm() {
      if (this.showMap) {
        this.showMap = false
        this.clearMap()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $rightwidth: 300px;
  .case-container{
    width: 100%;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content:space-between;
  }
  .form-div{
    width: calc( 100%- 300px);
    /*height: 50vh;*/
    .checkbox{
      display: inline-block;
      line-height: 32px; // 设置行高
      margin-right: 20px;
    }
    padding-right:10px;
  }
  .knowledge-div{
    width: $rightwidth;
  }

  #map {
    width: 100%;
    height: 50vh;
  }

</style>