<template>
    <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Row type="flex" justify="start">
            <Col span="14" offset="3">
                <!--{{this.optionState === false ? '添加' : '修改'}}-->
                <Form label-position="left" :model="formItem" :label-width="100">
                    <FormItem v-show="hidden.super_name" label="上级机构：" v-if="optionState === false">
                        <Input v-model="formItem.super_name" style="width: 70%" placeholder="必填" disabled></Input>
                    </FormItem>
                    <FormItem v-show="hidden.name" label="机构名称：">
                        <Input v-model="formItem.name" style="width: 70%" placeholder="必填"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.code" label="机构编号：">
                        <Input v-model="formItem.code" style="width: 70%" placeholder="不填则自动生成"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.sys_area" label="运营商编号：">
                        <Select v-model="formItem.sys_area" style="width: 70%" disabled>
                            <Option value="LA">沈阳-居游</Option>
                        </Select>
                    </FormItem>
                    <slot v-show="hidden.slot" :row="formItem"></slot>
                    <FormItem v-show="hidden.area_id" label="归属区域：">
                        <Select v-model="formItem.area_id" style="width: 70%" filterable clearable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="hidden.type" label="机构类型：">
                        <Select v-model="formItem.type" style="width: 70%" disabled>
                            <Option value="1">公司</Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="hidden.grade" label="机构等级：">
                        <Select v-model="formItem.grade" style="width: 70%" disabled>
                            <Option value="1">一级</Option>
                            <Option value="2">二级</Option>
                            <Option value="3">三级</Option>
                            <Option value="4">四级</Option>
                            <Option value="5">五级</Option>
                            <Option value="6">六级</Option>
                            <Option value="7">七级</Option>
                            <Option value="8">八级</Option>
                            <Option value="9">九级</Option>
                            <Option value="10">十级</Option>
                        </Select>
                    </FormItem>
                  <FormItem v-show="hidden.level" label="机构级别：">
                    <Select v-model="formItem.level" style="width: 70%">
                      <Option value="10">市</Option>
                      <Option value="20">区</Option>
                      <Option value="30">街道</Option>
                      <Option value="35">乡镇</Option>
                      <Option value="40">社区</Option>
                      <Option value="45">村</Option>
                    </Select>
                  </FormItem>
                  <FormItem v-show="hidden.system" label="所属系统：">
                    <CheckboxGroup v-model="formItem.systemList" style="width: 82%" >
                      <Checkbox border style="margin-top: 2%" :value="item.value" v-for="item in systemDictList" v-bind:key="item.value" :label="item.value">{{item.label}}</Checkbox>
<!--                      <Checkbox label="dyc" border></Checkbox>-->
<!--                      <Checkbox label="grid" border></Checkbox>-->
<!--                      <Checkbox label="worker" border></Checkbox>-->
                    </CheckboxGroup>
<!--                    <Select v-model="formItem.system" style="width: 70%">-->
<!--                      <Option value="csc">csc</Option>-->
<!--                      <Option value="dyc">dyc</Option>-->
<!--                      <Option value="grid">grid</Option>-->
<!--                      <Option value="35">乡镇</Option>-->
<!--                      <Option value="40">社区</Option>-->
<!--                      <Option value="45">村</Option>-->
<!--                    </Select>-->
                  </FormItem>
                    <FormItem v-show="hidden.useable" label="是否启用：">
                        <i-switch v-model="formItem.USEABLE" true-value="1" false-value="0" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </FormItem>
                    <FormItem v-show="hidden.address" label="联系地址：">
                        <Input v-model="formItem.address" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.zip_code" label="邮政编码：">
                        <Input v-model="formItem.zip_code" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.phone" label="电话：">
                        <Input v-model="formItem.phone" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.fax" label="传真：">
                        <Input v-model="formItem.fax" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.email" label="邮箱：">
                        <Input v-model="formItem.email" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.master" label="负责人：">
                        <Input v-model="formItem.master" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.primary_person" label="主负责人：">
                        <Input v-model="formItem.PRIMARY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.deputy_person" label="副负责人：">
                        <Input v-model="formItem.DEPUTY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.sort" label="排序：">
                        <InputNumber :min="0" v-model="formItem.sort" style="width: 30%"></InputNumber>
                    </FormItem>
                    <FormItem v-show="hidden.remarks" label="备注信息：">
                        <Input v-model="formItem.remarks" maxlength="255" show-word-limit type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>
                    <template v-if="optionState === false">
                        <FormItem v-show="hidden.role">
                            <Checkbox size="large" v-model="roleState">勾选之后，会自动添加同名的用户。用户初始密码:qstb@2020，请尽快修改密码。</Checkbox>
                        </FormItem>
                        <FormItem v-show="hidden.role" label="用户角色：" v-if="roleState">
                            <Tag v-for="item in roleList" size="medium" :checkable="true" :checked="false"
                                 :key="item.id"
                                 :name="item.name" @on-change="tagClick" style="cursor: pointer">{{ item.name }}
                            </Tag>
                        </FormItem>
                    </template>
                    <template v-if="optionState === false">
                        <FormItem v-show="hidden.sysgroup">
                            <Checkbox size="large" v-model="set_admin">勾选之后，会自动添加机构的admin的用户。用户初始密码:MZqstb@2021。</Checkbox>
                        </FormItem>
                        <FormItem v-show="hidden.sysgroup" label="选择系统权限：" v-if="set_admin">
                            <Tag v-for="item in sysGroupList" color="#FFA2D3" size="medium" :checkable="true" :checked="false"
                                 :key="item.id"
                                 :name="item.name" @on-change="tagClick" style="cursor: pointer">{{ item.name }}
                            </Tag>
                        </FormItem>
                    </template>
                    <FormItem>
                        <Button shape="circle" type="primary" :loading="btnLoading" @click="saveOption">保存</Button>
                        <Button shape="circle" style="margin-left: 8px" @click="cancelOption">取消</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </div>
</template>

<script>
import {
  getCompanyRoleList,
  saveOfficeMZnew,
  findRolegroupList,
  getAreaList,
  getById
} from '../../../../../api/system/system'
import { getDictList } from '@/api/eventlist'

export default {
  name: 'companyOption',
  props: {
    companyId: {
      type: String,
      default: () => {
        return ''
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {
          USEABLE: '1'
        }
      }
    },
    optionState: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    getUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    hiddenArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      systemDictList: [],
      btnLoading: false,
      spinShow: false,
      cityList: [],
      roleList: [],
      sysGroupList: [
        // { id: '3e611bab5fcc453ca4d16aaba8018b41', name: '疫情系统_社区', limit_system: 'xgc' },
        // { id: '7fedf3fcc0dc4572a8a8d3c40edcd2e3', name: '全市通办系统_社区', limit_system: 'csc' },
        // { id: '87f96bafa4e1479e92c541b02395fd75', name: '实名制登记系统_社区', limit_system: 'worker' },
        // { id: 'e4bbea1f7f544e2d970d66630d9911b6', name: '网格化服务系统_社区', limit_system: 'grid' }
      ],
      roleState: false,
      set_admin: false,
      formItem: {
        USEABLE: '1',
        set_user: false,
        login_flag: '',
        systemList: []
      },
      hidden: {
        super_name: true,
        name: true,
        sys_area: true,
        slot: true,
        area_id: true,
        type: true,
        grade: true,
        useable: true,
        address: true,
        zip_code: true,
        phone: true,
        fax: true,
        email: true,
        master: true,
        primary_person: true,
        deputy_person: true,
        sort: true,
        remarks: true,
        role: true,
        sysgroup: true,
        level: true,
        system: true,
        code: true
      }
    }
  },
  mounted () {
    this.getDictList({ type: 'sc_office_system' })
    this.getRoleGroupList()
    this.hiddenArr.forEach(item => {
      if (this.hidden.hasOwnProperty(item)) {
        this.hidden[item] = false
      }
    })
    this.getAreaList()
  },
  methods: {
    getDictList (data) {
      getDictList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.systemDictList = data.data.results
        }
      })
    },
    tagClick (checked, name, id) {
      this.roleList.forEach(item => {
        if (item.name === name) {
          checked === true ? item.state = true : item.state = false
        }
      })
    },
    getRoleList (data) {
      getCompanyRoleList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.roleList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getRoleGroupList (data) {
      findRolegroupList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.sysGroupList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getAreaList () {
      getAreaList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let cityData = []
          data.data.forEach(item => {
            cityData.push({ 'value': item.id, 'label': item.name })
          })
          this.cityList = cityData
        } else {
          this.error(data)
        }
      })
    },
    getById (data) {
      this.spinShow = true
      getById(data, this.getUrl).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          if (data.data.system !== null && data.data.system !== undefined) {
            data.data.systemList = data.data.system.split(',')
          }
          this.formItem = {
            ...data.data,
            ...this.formItem
          }
          this.spinShow = false
        } else {
          this.error(data)
        }
      })
    },
    saveOption () {
      // 添加机构用户绑定角色的处理
      if (this.optionState === false) {
        let roleList = []
        this.roleList.forEach(item => {
          if (item.state !== undefined) {
            if (item.state === true) {
              roleList.push(item.id)
            }
          }
        })
        this.formItem.rolelist = roleList
      }
      if (this.roleState === true) {
        this.formItem.set_user = true
        this.formItem.login_flag = '1'
      }
      if (this.optionState === false) {
        let sysGroupList = []
        this.sysGroupList.forEach(item => {
          if (item.state !== undefined) {
            if (item.state === true) {
              sysGroupList.push(item.id)
            }
          }
        })
        this.formItem.sysGroupList = sysGroupList
      }
      if (this.set_admin === true) {
        this.formItem.set_admin = true
        this.formItem.login_flag = '1'
      }
      if (this.formItem.systemList !== null && this.formItem.systemList !== undefined && this.formItem.systemList !== '') {
        this.formItem.system = this.formItem.systemList.join(',')
      }
      // 保存操作
      this.btnLoading = true
      saveOfficeMZnew(this.formItem).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.$emit('saveOption', this.formItem, data.data)
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    cancelOption () {
      this.$emit('cancelOption')
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    formData () {
      this.formItem = this.$common.xeUtils.clone(this.formData)
    }
  }
}
</script>

<style scoped>

</style>
