<template>
  <view class="content">
    <view class="search card">
      <u--input
          prefixIcon="search"
          placeholder="请输入关键字"
          border="surround"
          v-model="deptName"
          clearable
          shape="circle"
      ></u--input>
      <view class="ml-10">
        <u-button type="success" text="确定" @click="getData"></u-button>
      </view>
    </view>
    <u-popup :show="popupShow" @close="popupShow = false" mode="right" :customStyle="{width:'85vw'}">
      <view class="card">
        <view class="pl-10 pr-10">
          <u--form labelPosition="left">
            <!--          <u-form-item label="分公司状态" borderBottom>-->
            <!--            <u&#45;&#45;text :text="BRANCH_STATUS_NAME || '请选择'" @click="branchStatusShow = true"></u&#45;&#45;text>-->
            <!--            <u-picker :show="branchStatusShow" :columns="branchStatusList" keyName="NAME"-->
            <!--                      @cancel="branchStatusShow = false"-->
            <!--                      @confirm="pickerConfirm($event,'branchStatusList')"></u-picker>-->
            <!--          </u-form-item>-->
            <u-form-item label="部门级别" borderBottom>
              <u--text :text="DEPARTMENT_LEVEL_NAME || '请选择'" @click="departmentLevelShow = true"></u--text>
              <u-picker :show="departmentLevelShow" :columns="departmentLevelList" keyName="NAME"
                        @cancel="departmentLevelShow = false"
                        @confirm="pickerConfirm($event,'departmentLevelList')"></u-picker>
            </u-form-item>
          </u--form>
        </view>
        <view class="mt-10 flex-between">
          <view class="flex1">
            <u-button type="info" text="重置" @click="reset"></u-button>
          </view>
          <view class="ml-10 flex1">
            <u-button type="primary" text="查询" @click="getData"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
    <u-list v-if="list.length > 0">
      <u-list-item v-for="(item, index) in list" :key="index">
        <view>
          <view class="flex-between main-title">
            <text>{{ item.NAME }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>部门级别：{{ item.LEVEL_NAME }}</text>
            <text>上级部门：{{ item.father_name || '' }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>部门负责人：{{ item.HEADMAN_NAME || '' }}</text>
            <text>部门主管领导：{{ item.LEADER_CHARGE_NAME || '' }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>是否监管部门：{{ item.ISSUPERVISE == '0' ? '否' : '是' }}</text>
            <text v-if="item.STATE == '0'">是否安监部门：是</text>
            <text v-if="item.STATE == '2'">是否消防部门：是</text>
          </view>
        </view>
      </u-list-item>
    </u-list>
    <empty v-else></empty>
    <fab-button type="search" @click="popupShow = true"/>
  </view>
</template>

<script>
import {getCorpInfoListRetrievalDepartment, getBranchStatus, getDepartmentLevel} from "../../../api";
import FabButton from '@/components/fab_button/index.vue'

export default {
  components: {
    FabButton,
  },
  data() {
    return {
      deptName: '',
      CORPINFO_ID: '',
      list: [],
      listAll: [],
      branchStatusList: [],
      departmentLevelList: [],
      popupShow: false,
      branchStatusShow: false,
      departmentLevelShow: false,
      BRANCH_STATUS: '',
      BRANCH_STATUS_NAME: '',
      DEPARTMENT_LEVEL: '',
      DEPARTMENT_LEVEL_NAME: '',
    }
  },
  onLoad(event) {
    this.CORPINFO_ID = event.CORPINFO_ID;
    this.getData();
    this.fnGetBranchStatus();
    this.fnGetDepartmentLevel();
  },
  methods: {
    async getData() {
      this.popupShow = false
      let resData = await getCorpInfoListRetrievalDepartment({
        deptName: this.deptName,
        LEVEL: this.DEPARTMENT_LEVEL,
        CORP_STATE: this.BRANCH_STATUS,
        CORPINFO_ID: this.CORPINFO_ID,
      });
      this.list = resData.zTreeNodes;
      this.listAll = resData.zTreeNodes;
    },
    async fnGetBranchStatus() {
      let resData = await getBranchStatus()
      this.$set(this.branchStatusList, 0, resData.list)
    },
    async fnGetDepartmentLevel() {
      let resData = await getDepartmentLevel()
      this.$set(this.departmentLevelList, 0, resData.list)
    },
    pickerConfirm(e, list) {
      if (list === 'branchStatusList') {
        this.BRANCH_STATUS = e.value[0].BIANMA
        this.BRANCH_STATUS_NAME = e.value[0].NAME
        this.branchStatusShow = false;
      }
      if (list === 'departmentLevelList') {
        this.DEPARTMENT_LEVEL = e.value[0].BIANMA
        this.DEPARTMENT_LEVEL_NAME = e.value[0].NAME
        this.departmentLevelShow = false;
      }
    },
    reset() {
      this.popupShow = false
      this.BRANCH_STATUS = ''
      this.BRANCH_STATUS_NAME = ''
      this.DEPARTMENT_LEVEL = ''
      this.DEPARTMENT_LEVEL_NAME = ''
      this.CORP_NAME = ''
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.search {
  display: flex;

  .ml-10 {
    margin-left: 10rpx;
  }

  .bth-mini {
    width: 100rpx;
  }

}

</style>