<!--创建事件-->
<template>
  <div class="case-container">
    <div 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"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来电时间" prop="callTime">
                <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"/>
              </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-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"/>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="事件标题" prop="title">
                <el-input v-model="form.title" maxlength="100"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <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>
            </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" :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" type="primary" @click="submit">提交</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="knowledge-div">
      <knowledge-search/>
    </div>
  </div>
</template>

<script>
import KnowledgeSearch from './components/knowledgeSearch'
// import DeptSelect from '../../components/DeptSelect/index'
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'

export default {
  name: 'CreateCase',
  components: { KnowledgeSearch },
  data() {
    const validateAddress = function(rule, value, callback) {
      console.log(value)
      // if (value.areaCode === '' || value.streetCode === '' || value.communityCode === '') {
      if (value.areaCode === '' || value.streetCode === '') {
        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', // 是否要情
        title: '', // 事件标题
        description: '', // 事件内容
        limitedTime: '', // 事件办理期限
        processWay: '', // 处理方式
        processDept: '', // 处理单位
        processUser: '' // 处理人
      },
      reportersList: [], // 联系人选择列表
      eorcList: [], // 案卷类别
      caseTypeList: [], // 案卷类别二级
      caseDetailTypeList: [], // 案卷类别三级
      areaList: [], // 区域列表
      streetList: [], // 街道列表
      communityList: [], // 社区列表
      gridList: [], // 网格列表
      caseLevelList: [], // 紧急程度字典
      processWayList: [], // 是否列表
      caseSourceList: [],
      userList: [], // 处理人列表
      inputSize: 'small', // 按钮样式
      rules: {
        caseId: [{ required: true, message: '事件编号不能为空', trigger: ['blur'] }],
        sound: [{ required: true, message: '来电录音编号不能为空', trigger: ['blur'] }],
        callTime: [{ required: true, message: '来电时间不能为空', trigger: ['blur'] }],
        reporterName: [{ required: true, 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: true, 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.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          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, // 是否要情
            title: this.form.title, // 事件标题
            description: this.form.description, // 事件内容
            limitedTime: this.form.limitedTime, // 事件办理期限
            processWay: '' + this.form.processWay, // 处理方式
            processDept: this.form.processDept, // 处理单位
            processUser: this.form.processUser // 处理人
          }
          addCase(form).then(response => {
            if (response.code === 200) {
              this.$message.success('新建成功')
              this.$emit('cancel')
            }
          }).catch(_ => {
          })
        }
      })
    },
    // 初始化数据
    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: '' // 事件地址
        },
        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)
      }
    },
    // 根据电话去找人
    fetchReporter(phone) {
      const params = {
        tel: phone
      }
      getCustomerList(params).then(response => {
        if (response.code === 200 && response.data && response.data.total === 1) {
          this.form.reporterName = response.data.rows[0].name
        }
      })
    },
    // 获取联系人列表
    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(typeId).then(response => {
          this.caseDetailTypeList = response.data
        })
      }
    },
    // 区列表
    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
    }
  }
}
</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);
    .checkbox{
      display: inline-block;
      line-height: 32px; // 设置行高
      margin-right: 20px;
    }
    padding-right:10px;
  }
  .knowledge-div{
    width: $rightwidth;
  }

</style>