<template>
  <Modal v-model="showModalCompany" :mask-closable="false" :closable="false" :title="modalTitle" :value="value"
         width="900" v-draggable="options">
    <div style="height: 450px;overflow-y: scroll">
      <i-form label-position="right" :label-width="100" ref="companyForm" :model="bean" :rules="rules" inline>
        <!--<Divider orientation="left"><span style="font-weight: bold;font-size: 14px">基本信息</span></Divider>-->
        <Row>
          <i-col :span="12">
            <Form-item label="单位名称" class="ivu-form-item-search" prop="companyName">
              <Input v-model="bean.companyName" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位简称" class="ivu-form-item-search" prop="shortName">
              <Input v-model="bean.shortName" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位编码" class="ivu-form-item-search" prop="companyCode">
              <Input v-model="bean.companyCode" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="所属区域" class="ivu-form-item-search" >
              <Select v-model="bean.areaName" filterable placeholder="请输入关键字搜索"
                      style="width:253px;overflow : hidden; white-space: nowrap; " remote :disabled="disabled"
                      :remote-method="remoteMethod1" :loading="loading1" :max-tag-count="1" clearable>
                <Option v-for="item in areas" :value="item.areaName" :key="item.areaName" @click.native="checkedObjOk(item)">{{ item.fullPathName }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12" >
            <Form-item label="主管单位" class="ivu-form-item-search" prop="supervisorCompany">
              <Select v-model="bean.supervisorCompanyName" :placeholder="bean.supervisorCompanyName?bean.supervisorCompanyName:'请输入搜索并选择单位'"
                      style="width:253px" remote filterable :remote-method="remoteMethod2" :disabled="disabled" :max-tag-count="1" clearable>
                <Option v-for="item in options2" :value="item.companyName" :key="item.id" @click.native="supervisorCompanyClick(item)">{{item.companyName }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="上级单位" class="ivu-form-item-search">
              <Select  v-model="bean.parentName"  :placeholder="bean.parentName?bean.parentName:'请输入搜索并选择单位'"
                       style="width:135%" remote filterable :remote-method="remoteMethod3" :disabled="disabled">
                <Option v-for="item in options3" :value="item.companyName" :key="item.id" @click.native="companyClick(item)">{{item.companyName }}</Option>
              </Select>
              <!--<Input v-else v-model="bean.parentName" style="width: 253px" :disabled="disabled"></Input>-->
            </Form-item>
          </i-col>
          <!--<i-col :span="12">
            <Form-item label="负责人" class="ivu-form-item-search">
              <Input v-model="bean.charge" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>-->
          <i-col :span="12">
            <Form-item label="单位类型" class="ivu-form-item-search">
              <Select v-model="bean.companyType" style="width: 253px" :disabled="disabled" placeholder="请选择单位类型">
                <Option v-for="item in companyTypes" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <!--<i-col :span="12">
            <Form-item label="排序" class="ivu-form-item-search">
              <Input v-model="bean.sort" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>-->
          <i-col :span="12">
            <Form-item label="所属序列" class="ivu-form-item-search" prop="sequence">
              <Select v-model="bean.sequence" style="width: 253px" :disabled="disabled" placeholder="请选择所属序列">
                <Option v-for="item in sequences" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位层次" class="ivu-form-item-search">
              <Select v-model="bean.areaLevel" style="width: 253px" :disabled="disabled" placeholder="请选择单位层次">
                <Option v-for="item in areaLevels" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位类别" class="ivu-form-item-search">
              <Select v-model="bean.category" style="width: 253px" :disabled="disabled" placeholder="请选择单位类别">
                <Option v-for="item in categorys" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位级别" class="ivu-form-item-search">
              <Select v-model="bean.orgLevel" style="width: 253px" :disabled="disabled" placeholder="请选择单位级别">
                <Option v-for="item in orgLevels" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位性质" class="ivu-form-item-search">
              <Select v-model="bean.nature" style="width: 253px" :disabled="disabled" placeholder="请选择单位性质">
                <Option v-for="item in natures" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="管理方式" class="ivu-form-item-search">
              <Select v-model="bean.managementStyle" style="width: 253px" :disabled="disabled" placeholder="请选择管理方式">
                <Option v-for="item in managementStyles" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="所属行业" class="ivu-form-item-search">
              <!--<Select v-model="bean.industryType" style="width: 253px" :disabled="disabled" placeholder="请选择所属行业">
                <Option v-for="item in industryTypes" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>-->
              <Cascader :data="industryTypes"  style="width: 253px" :disabled="disabled"
                        placeholder="请选择所属行业" @on-change="industryTypeChange"></Cascader>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="经费形式" class="ivu-form-item-search">
              <Select v-model="bean.fundingStyle" style="width: 253px" :disabled="disabled" placeholder="请选择经费形式">
                <Option v-for="item in fundingStyles" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="邮政编码" class="ivu-form-item-search">
              <Input v-model="bean.zipCode" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="信用代码" class="ivu-form-item-search">
              <Input v-model="bean.creditCode" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="主体岗位" class="ivu-form-item-search">
              <Select v-model="bean.mainPost" style="width: 253px" :disabled="disabled" placeholder="请选择主体岗位">
                <Option v-for="item in mainPosts" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="所属系统" class="ivu-form-item-search">
              <!--<Select v-model="bean.systemType" style="width: 253px" :disabled="disabled" placeholder="请选择所属系统">
                <Option v-for="item in systemTypes" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>-->
              <Cascader :data="systemTypes"  style="width: 253px" :disabled="disabled"
                        placeholder="请选择所属系统" @on-change="systemTypeChange"></Cascader>
            </Form-item>
          </i-col>


          <i-col :span="12">
            <Form-item label="法人代表" class="ivu-form-item-search">
              <Input v-model="bean.legalPerson" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="批准成立文号" class="ivu-form-item-search">
              <Input v-model="bean.establishmentApprovalNumber" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="批准成立时间" class="ivu-form-item-search">
              <DatePicker :value="bean.establishmentApprovalTime" format="yyyy.MM.dd" type="date" placeholder="请选择时间"
                          style="width: 130%" @on-change="bean.establishmentApprovalTime = $event" :disabled="disabled"></DatePicker>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="单位地址" class="ivu-form-item-search">
              <Input v-model="bean.address" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="备注" class="ivu-form-item-search">
              <Input v-model="bean.remark" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
        </Row>
        <!--<Divider orientation="left"><span style="font-weight: bold;font-size: 14px">单位联系人信息</span></Divider>
        <Row>
          <i-col :span="12">
            <Form-item label="联系人姓名" class="ivu-form-item-search">
              <Input v-model="bean.contactName" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="联系人qq" class="ivu-form-item-search">
              <Input v-model="bean.contactQq" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="微信" class="ivu-form-item-search">
              <Input v-model="bean.contactWechat" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="联系人电话" class="ivu-form-item-search">
              <Input v-model="bean.contactPhone" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
          <i-col :span="12">
            <Form-item label="联系人地址" class="ivu-form-item-search">
              <Input v-model="bean.contactAddress" style="width: 253px" :disabled="disabled"></Input>
            </Form-item>
          </i-col>
        </Row>-->
      </i-form>
    </div>
    <template #footer>
    <div>
      <Button @click="cancel">关闭</Button>
      <Button type="primary" :loading="saveLoading" @click="ok('companyForm')" v-if="showSaveBtn">保存
      </Button>
    </div>
    </template>
    <bc-check-dict ref="checkDict" :show.sync="checkDictShow" :groupCode="'post_grade'" :parent-value="'post_name'" @checkOk="checkedDictOk" :treeId="'checkDict'" ></bc-check-dict>
  </Modal>
</template>

<script>
  import {addCompany, editCompany,getCompanyList} from '../../../../api/base/company-api'
  import { getAreaList } from '../../../../api/base/area-api'

  let $this;
  export default {
    name: "companyModal",
    components: {},
    props: {
      show: Boolean,
      value: Object
    },
    data() {
      return {
        checkDictShow: false,
        showModalCompany: false,
        bean: {},
        initBean: {},
        flag: '',
        saveLoading: false,
        modalTitle: '',
        disabled: false,
        showSaveBtn: true,
        companyTypes: [{id: '1', value: '-1', name: '基层单位'}],
        sequences: [{id: '1', value: '1', name: '党群序列'}],
        areaLevels: [{id: '1', value: '1', name: '省'}],
        categorys: [{id: '1', value: '1', name: '领导机构'}],
        orgLevels: [{id: '1', value: '1', name: '省'}],
        natures: [{id: '1', value: '1', name: '事业单位'}],
        managementStyles: [{id: '1', value: '1', name: '事业管理'}],
        industryTypes: [{id: '1', value: '1', name: '教育'}],
        fundingStyles: [{id: '1', value: '1', name: '上级拨款'}],
        mainPosts: [{id: '1', value: '1', name: '管理岗'}],
        systemTypes: [{id: '1', value: '1', name: '政府系统'}],
        systemSubTypes: [{id: '1', value: '1', name: '办公厅'}],
        rules: {
          companyName: [
            {required: true, message: '单位名称不能为空!', trigger: 'blur'},
          ],
          companyType: [
            {required: true, message: '单位类型不能为空!', trigger: 'blur'},
          ],
          zipCode: [
            {required: true, message: '邮政编码不能为空!', trigger: 'blur'},
          ],
          shortName: [
            {required: true, message: '单位简称不能为空!', trigger: 'blur'},
          ],
          category: [
            {required: true, message: '单位类别!', trigger: 'blur'},
          ],
          sequence: [
            {required: true, message: '所属序列!', trigger: 'blur'},
          ],
          areaLevel: [
            {required: true, message: '单位层次!', trigger: 'blur'},
          ],
          orgLevel: [
            {required: true, message: '单位级别!', trigger: 'blur'},
          ],
          creditCode: [
            {required: true, message: '信用代码不能为空!', trigger: 'blur'},
          ],
          nature: [
            {required: true, message: '单位性质!', trigger: 'blur'},
          ],
          managementStyle: [
            {required: true, message: '管理方式!', trigger: 'blur'},
          ],
          industryType: [
            {required: true, message: '所属行业不能为空!', trigger: 'blur'},
          ],
          mainPost: [
            {required: true, message: '主体岗位不能为空!', trigger: 'blur'},
          ],
          fundingStyle: [
            {required: true, message: '经费形式不能为空!', trigger: 'blur'},
          ],
          systemType: [
            {required: true, message: '所属系统不能为空!', trigger: 'blur'},
          ],
          systemSubType: [
            {required: true, message: '所属系统-子不能为空!', trigger: 'blur'},
          ],
          legalPerson: [
            {required: true, message: '法人代表不能为空!', trigger: 'blur'},
          ],
          establishmentApprovalNumber: [
            {required: true, message: '批准成立文号不能为空!', trigger: 'blur'},
          ],
          establishmentApprovalTime: [
            {required: true, message: '批准成立时间不能为空!', trigger: 'blur'},
          ],
        },
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        },
        loading1:false,
        loading2:false,
        loading3:false,
        options2:{},
        options3:{},
        companyList:[],
        areas:[]
      }
    }, methods: {
      ok(name) {
        this.$refs[name].validate((valid) => {
          if (!valid) {
            return;
          }//表单校验失败则返回
          //必须要有区域
          if (!this.bean.areaId){
            this.$Message.warning("请先选择区域或输入所属区域！");
            return
          }
          this.saveLoading = true;
          //this.showModalCompany = false;
          if (this.flag == 'edit') {
            let parmas = this.bean;
            delete parmas['createTime'];
            delete parmas['modifyTime'];
            //执行修改操作
            editCompany(parmas).then(data => {
              if (!data.status) {
                this.$Message.error(data.error.message);
                this.saveLoading = false;
                console.log(data);
                return false;
              }
              this.$Message.success("操作成功！");
              this.saveLoading = false;
              this.$emit('update:show', false);
              this.$emit('reload-data');
            }).catch(err => {
              this.$Message.error("操作失败！");
              this.saveLoading = false;
              console.log(err);
            })
          } else if (this.flag == 'add') {
            delete this.bean['createTime'];
            delete this.bean['modifyTime'];
            //执行添加操作
            addCompany(this.bean).then(data => {
              if (!data.status) {
                this.$Message.error(data.error.message);
                this.saveLoading = false;
                console.log(data);
                return false;
              }
              this.$Message.success("操作成功！");
              this.saveLoading = false;
              this.$emit('update:show', false);
              this.$emit('reload-data');
            }).catch(err => {
              this.$Message.error("操作失败！");
              this.saveLoading = false;
              console.log(err);
            })
          }
        })

      },
      cancel() {
        this.showModalCompany = false;
        this.$emit("update:show", false);
      },
      remoteMethod1 (query) {
        if (query !== '') {
          this.loading1 = true;
            getAreaList({fullPathName__like :query,areaLevel__lt: '4'}).then(res => {
              this.areas = res.data.result;
              this.loading1 = false;
            });
        }else {
          this.areas = [];
        }
      },
      remoteMethod2(query) {
        if (query !== '') {
          this.loading2 = true;
          setTimeout(() => {
            this.loading2 = false;
            const list = this.companyList.map(item => {
              return {
                id: item.id,
                companyName: item.companyName,
              };
            });
            this.options2 = list.filter(item => item.companyName.toLowerCase().indexOf(query.toLowerCase()) > -1);
          }, 200);
        } else {
          this.options2 = [];
        }
      },
      remoteMethod3(query) {
        if (query !== '') {
          this.loading3 = true;
          setTimeout(() => {
            this.loading3 = false;
            const list = this.companyList.map(item => {
              return {
                id: item.id,
                companyName: item.companyName,
              };
            });
            this.options3 = list.filter(item => item.companyName.toLowerCase().indexOf(query.toLowerCase()) > -1);
          }, 200);
        } else {
          this.options3 = [];
        }
      },
      companyClick(item){
        this.bean.parentId=item.id
        this.bean.parentName=item.companyName
      },
      supervisorCompanyClick(item){
        this.bean.supervisorCompany=item.id
        this.bean.supervisorCompanyName=item.companyName
      },
      getCompany(){
        getCompanyList().then(res=>{
          if(res.data.result && res.data.result.length>0){
            this.companyList=res.data.result
          }
        })
      },
      //所属行业下拉框变更触发事件
      industryTypeChange(value, selectedData) {
        this.bean.industryType = value[value.length-1]
      },
      //系统分类下拉框变更触发事件
      systemTypeChange(value, selectedData) {
        this.bean.systemSubType = value[value.length-1]
        this.bean.systemType = selectedData[0].value
      },
      //选择对象-完成
      checkedObjOk (item){
        this.bean.areaId = item.id
        this.bean.areaName = item.areaName
        this.bean.areaCode = item.areaCode
        this.bean.zipCode = item.areaCode
        //this.$forceUpdate();
      },
      showCheckDict(){
        this.checkDictShow=true
      },
      checkedDictOk(checkObjs){
          console.log(checkObjs)
      },
      onSuccess(batchKey,file,fileList){
        debugger
      },
    },
    mounted() {
      $this = this;
      this.bean = this.initBean;
      this.getCompany();
      this.$dictUtil.getDict("unit_category",data=>{if(data && data.length>0){this.categorys=data}});
      this.$dictUtil.getDict("company_type",data=>{if(data && data.length>0){this.companyTypes=data}});
      this.$dictUtil.getDict("sequence",data=>{if(data && data.length>0){this.sequences=data}});
      this.$dictUtil.getDict("unit_level",data=>{if(data && data.length>0){this.areaLevels=data}});
      this.$dictUtil.getDict("agency_specifications",data=>{if(data && data.length>0){this.orgLevels=data}});
      this.$dictUtil.getDict("company_nature",data=>{if(data && data.length>0){this.natures=data}});
      this.$dictUtil.getDict("supervisor_mode",data=>{if(data && data.length>0){this.managementStyles=data}});
      this.$dictUtil.getDictCascade("facilities_industry",data=>{if(data && data.length>0){this.industryTypes=data}});
      this.$dictUtil.getDictCascade("subordinate_system",data=>{if(data && data.length>0){this.systemTypes=data}});
      //this.$dictUtil.getDict("systemSubTypes",data=>{if(data && data.length>0){this.systemSubTypes=data}})
      this.$dictUtil.getDict("post_category",data=>{if(data && data.length>0){this.mainPosts=data}})
    },
    watch: {
      show: {
        immediate: true,
        handler: function () {
          this.showModalCompany = this.show;
        }
      },
      value: {
        immediate: true,
        handler: function () {
          //赋值
          this.bean = this.value.bean == null ? Object.assign({}, this.initBean) : JSON.parse(JSON.stringify(this.value.bean));
          this.flag = this.value.flag;
          this.modalTitle = this.value.title;
          //如果时查看的功能，要将所有input框只读，并且去掉保存按钮
          if (this.flag == 'view') {
            this.disabled = true;
            this.showSaveBtn = false;
          } else {
            this.disabled = false;
            this.showSaveBtn = true;
          }
        }
      }
    }

  }
</script>

<style>
  .ivu-form-item-search {
    margin-bottom: 21px;
  }
</style>
