
<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">
        <el-select
          class="inline-16"
          size="small"
          v-model="status"
          placeholder="请选择"
          @change="handleSelectChange"
        >
          <el-option
            v-for="item in select"
            :label="item.remarks"
            :value="item.value"
            :key="item.index"
          ></el-option>
        </el-select>
      </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> {{scope.data.column.data[[scope.data.column.columnname]]}}</p>
      </template>
    </basicLayout>
  </div>
</template>

<script>
import accountUse from './modules/useAccdount.vue'
import accountUnuse from './modules/unuseAccount.vue'
export default {
  data () {
    return {
      options:[],
      select:[],
      status:''
    }
  },
  components:{
    // accountEdit,
    accountUse,
    accountUnuse
  },
  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;
    },
    handleSelectChange() {
      this.$refs['basicLayout'].param.content.where.status = this.status
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
  },
  mounted () {
    this.userstatus()
  }
}

</script>
<style>
</style>