<template>
  <div>
    <!--选择账号 选择账号的具体页面 选择添加账号-->
    <el-button icon="el-icon-plus" size="medium" @click="open" :disabled="viewMode">
      添加账号
    </el-button>
    <!--title表示标题 close表示取消-->
    <el-dialog
        @open="open"
      title="选择账号"
      :visible.sync="visible"
      @close="cancel"
      width="70%"
      :append-to-body="true"
    >
      <!--单选框和多选框选择 控制内容分类-->
      <el-form ref="account" :model="query" label-width="140px">
        <el-form-item label="平台分类">
          <!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
          <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
          <!--v-model默认绑定:value="query.content_type"  @change="query.content_type = $event.target.value"-->
         <grid-radio

             @change="ListQuery"
            v-model="query.platrorm_channel"
            :border="true"
            :options="
             platform_category
            "
            />
        </el-form-item>
        <el-form-item label="平台选择">
       <!--  <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
          <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
         <grid-radco

             @change="ListRuery"
            v-model="query.platform"
            :border="true"
            :options="
             this.description
            "
          />
        </el-form-item>
        <el-form-item label="部门选择">
         <!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
          <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
          <grid-radeo

              @change="ListCuery"
            v-model="query.department"
            :border="true"
            :options="this.departmentList2"
          />

        </el-form-item>
      </el-form>

      <div style="float: left;">
        <!--子代方法有一个·传值传向父级 onselect去接收这个值-->
        <select-account   @seletct="onSelect" />
      </div>
      <div style="clear: both"></div>


      <template v-slot:footer>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import GridRadco from "@/component/radio/GridRadco";
import GridRadeo from "@/component/radio/GridRadeo";
import GridRadio from "@/component/radio/GridRadio";
import AccountCard from "./AccountCard";
import SelectAccount from "./SelectAccount";
import {getAction} from "@/api";


export default {
  name: "AccountFilterSelect",
  /*引入三个组件*/
  components: { SelectAccount, AccountCard, GridRadio,GridRadeo,GridRadco },

  data() {
    return {
      departmentList2:[],
      description:[],
      visible: false,
      width: {
        label: 4,
        content: 20,

      },
      platform_category:[],
      query: {},
      /*传值传到当前的界面进行保存*/
	  accountList: []
    };
  },
  props:["viewMode"],
  methods: {
    ListCuery(){
      getAction("/account/list",{
        query:{
          platrorm_channel: '',
          platrorm_category:'',
          department_id:this.query.department,
        },
      }).then(res=>{
        console.log(res)
        this.accountList=res.data
      })
    },
    ListRuery(){
      getAction("/account/list",{
      query:{
        platrorm_channel: '',
        platrorm_category:this.query.platform,
        department_id:'',
      },


      }).then(res=>{
        console.log(res)
        this.accountList=res.data
      })
    },
    ListQuery(){
      console.log(1)
      getAction("/account/list",{
        query:{
        platrorm_channel: this.query.platrorm_channel,
        platrorm_category:'',
        department_id:'',
        }
      }).then(res=>{
        console.log(res)
        this.accountList=res.data
      })
    },
    /*控制弹窗的开启 控制弹框得开启*/
    open() {
      this.query={}
      console.log(this)
      /*动态渲染content_type接口*/
      getAction("/dict/list",{
        dict_code: "platform_category"
      }).then(res=>{
        this.platform_category=res.data
        console.log(this.platform_category)
      })
      /*动态渲染content_type接口*/
      getAction("/department/publish_permission",

      ).then(res=>{
        console.log(res)
        this.departmentList2=res.data
      })

      getAction("/account/plugin_list").then(res=>{
        console.log(res)
        this.description=res.data
      })
      this.visible = true;
    },
    /*通过confirm'继续向上传值*/
    confirm() {

      this.$emit("select", this.accountList);
      this.close();
    },
    /*取消就调用close 点击close就将识别取消按钮*/
    cancel() {
      this.close();
    },
    /*定义一个close得 调用取消*/
    close() {
      this.$emit("close");
      this.visible = false;
    },
	onSelect(data){
      /*把子级传入的值*/
    console.log(data)
		this.accountList = data;
	}
  }
};
</script>

<style lang="scss" scoped></style>

在这里插入图片描述