
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HManagement/accountManage/modules'
      }"
      tableName="accountTable" 
      idName="userid" 
      :apiId="{query:20221031141102,del:20221031141202}"
      :options="options"
      :detailPath="{
        path:'/account_details'
      }">
      <div slot="custom" style="display:flex"> 
        <div class="label_center">
          <span class="search__label">用户类型: </span>
          <el-select
            class="inline-16"
            size="small"
            v-model="accountType"
            placeholder="请选择用户类型"
            @change="typeChange"
            clearable

          >
            <el-option
              v-for="item in selectType"
              :label="item.remarks"
              :value="item.value"
              :key="item.index"
            ></el-option>
          </el-select>
        </div>
        <div class="label_center">
          <span class="search__label">状态: </span>
            <el-select
            class="inline-16"
            size="small"
            v-model="status"
            placeholder="请选择数据状态"
            @change="handleSelectChange"
            clearable

            >
            <el-option
              v-for="item in select"
              :label="item.remarks"
              :value="item.value"
              :key="item.index"
            ></el-option>
          </el-select>
        </div>
        
      </div>
      <template v-slot:tbList="scope">
        <p v-if="scope.data.column.columnname === 'status'">
          <span
            :style="
              scope.data.column.data.status === 'ACTIVE'
                ? 'color:#52C41A'
                : 'color:#FF3B30'
            "
            >{{
              scope.data.column.data.status === "ACTIVE"
                ? "启用"
                : scope.data.column.data.status === "INACTIVE"
                ? "停用"
                : "其他"
            }}</span
          >
        </p>
        <p v-else-if="scope.data.column.columnname === 'roleName'">
          <span v-if="scope.data.column.data.userrole.length !== 0">
            <span v-for="(item,index) in scope.data.column.data.userrole">
              <span v-if="index !== scope.data.column.data.userrole.length -1">{{item.remarks + '，'}}</span>
              <span v-else>{{item.remarks }}</span>
            </span>
          </span>

        </p>
        <p v-else> {{scope.data.column.data[[scope.data.column.columnname]]}}</p>
      </template>
      <template v-slot:tbOpreation="scope">
        <!-- <print :dataid="scope.data.data.userid" :sys_printmodelid="22"></print> -->
      </template>
    </basicLayout>
  </div>
</template>

<script>
import downSelect from '@/components/down_select/index.vue'
import accountUse from './modules/useAccdount.vue'
import accountUnuse from './modules/unuseAccount.vue'
import print from '@/components/print/index.vue'
export default {
  data () {
    return {
      options:[],
      select:[],
      selectType:[],
      status:'',
      accountType:''
    }
  },
  components:{
    print,
    accountUse,
    accountUnuse,
    downSelect,
  },
  methods:{
    onSuccess () {
      this.$refs.basicLayout.listData()
    },
    async userstatus() {
      let param = {
        classname: "sysmanage.develop.optiontype.optiontype",
        method: "optiontypeselect",
        content: {
          pageNumber: 1,
          pageSize: 20,
          typename: "userstatus",
          parameter: {},
        },
      };
      const res = await this.$api.requested(param);
      this.select = res.data;
    },
    async accountTypeList() {
      let param = {
        classname: "sysmanage.develop.optiontype.optiontype",
        method: "optiontypeselect",
        content: {
          pageNumber: 1,
          pageSize: 20,
          typename: "usertype",
          parameter: {},
        },
      };
      const res = await this.$api.requested(param);
      this.selectType = res.data;
      console.log(this.selectType);
      
    },
    handleSelectChange() {
      this.$refs['basicLayout'].param.content.where.status = this.status
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
    typeChange() {
      this.$refs['basicLayout'].param.content.where.usertype = this.accountType
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
  },
  mounted () {
    this.userstatus()
    this.accountTypeList()
  }
}

</script>
<style>

</style>