<style>
.else-width .ant-col-sm-16 {
  width: 78%;
}
</style>
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="定向模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol">

            <a-input v-model="name"></a-input>

        </a-form-item>
        <a-form-item label="地域" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="areaType" :defaultValue="0">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="CITY">按省市</a-radio-button>
            <a-radio-button value="COUNTY">按区县</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label=" "
          :colon="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          class="else-width"
          v-if="areaType!='NONE'"
        >
          <transfer-city v-if="areaType == 'CITY'" :checkData.sync="cityList" :dataValue="cityStr"></transfer-city>
          <transfer v-if="areaType == 'COUNTY'" :checkData.sync="areaList" :dataValue="areaStr"></transfer>
        </a-form-item>

        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="gender">
            <a-radio-button v-for="sex in toutiaoSex" :key="sex.itemValue" :value="sex.itemValue">{{sex.description}}</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-checkbox-group v-model="ageRange">
            <a-checkbox v-for="age in toutiaoAgeRange" :key="age.itemValue" :value="age.itemValue">{{age.description}}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item
          label="兴趣定向"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-model="intrestType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="SYSTEM_TJ">系统推荐</a-radio-button>
            <a-radio-button value="ZDY">自定义</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label=" "
          :colon="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          class="else-width"
          v-if="intrestType=='ZDY'"
        >
          <intrest-category v-if="intrestType == 'ZDY'" :checkData.sync="intrestCategoryList" :dataValue="adTagStr"></intrest-category>
        </a-form-item>
        <a-form-item label="平台" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="platformType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="IOS">IOS</a-radio-button>
            <a-radio-button value="ANDROID">Android</a-radio-button>
            <a-radio-button value="PC">PC</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="精选流量包" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="superiorPopularityType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="APP">应用软件精选</a-radio-button>
            <a-radio-button value="GAME">游戏精选</a-radio-button>
            <a-radio-button value="ZDY">自定义流量包</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="deviceTypeChshj">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="MOBILE">智能手机</a-radio-button>
            <a-radio-button value="PAD">平板</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="网络" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-checkbox-group v-model="netType">
            <a-checkbox
              v-for="netType in toutiaoNetType"
              :key="netType.itemValue"
              :value="netType.itemValue"
            >{{netType.description}}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="智能放量" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="smartFl">
            <a-radio-button value="0">不启用</a-radio-button>
            <a-radio-button value="1">启用</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="isArticleCategory" @change="changeArticleCategoryType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="CATEGORY">文章分类</a-radio-button>
          </a-radio-group>
          <br />
          <a-select
            mode="tags"
            v-model="tags"
            placeholder="选择文章分类"
            style="width: 600px"
            @change="onChange"
            v-if="isArticleCategory == 'CATEGORY'">
            <a-select-option
              v-for="articleCategory in articleCategoryList"
              :key="articleCategory.itemValue"
              :value="articleCategory.itemValue">{{articleCategory.itemText}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="手机品牌" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group @change="changeMobileBrandType" v-model="isMobileBrand">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button v-if="platformType != 'IOS'" value="BRAND">按品牌</a-radio-button>
          </a-radio-group>
          <br />
          <a-select
            mode="tags"
            v-model="mobileType"
            placeholder="选择手机品牌"
            style="width: 600px"
            @change="onChange"
            v-if="showMobileBrand">
            <a-select-option
              v-for="mobileBrand in mobileBrandList"
              :key="mobileBrand.itemValue"
              :value="mobileBrand.itemValue"
            >{{mobileBrand.itemText}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { deleteAction, postAction, getAction } from '@/api/manage'
import transfer from './transfer'
import transferCity from './transferCity'
import intrestCategory from './IntrestCategory'
import ARadioGroup from "ant-design-vue/es/radio/Group";
export default {
  name: 'ByteDanceUserOrientationTemplateModal',
  components: {
    ARadioGroup,
    transfer,
    transferCity,
    intrestCategory
  },
  data() {
    return {
      deviceTypeChshj:'NONE',
      superiorPopularityType:'NONE',
      cityStr:[],
      areaStr:[],
      adTagStr:[],
      cityList:[],
      areaList:[],
      name:"",
      netType:[],
      platformType:"NONE",
      mobileType:[],
      intrestCategoryList:[],
      smartFl:"0",
      intrestType:"NONE",
      title: '操作',
      intrestCategory:'',
      dataBox:[],
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      id:null,
      confirmLoading: false,
      form: this.$form.createForm(this),
      tags:null,
      gender: "NONE",
      toutiaoSex: {},
      ageRange: [],
      toutiaoAgeRange: {},
      toutiaoNetType: {},
      isMobileBrand: "NONE",
      showMobileBrand: false,
      mobileBrandList: null,
      showArticleCategory: false,
      articleCategoryList: [],
      isArticleCategory: "NONE",
      areaType: "NONE",
      value: undefined,
      model1: {},
      model2: {},
      currentRoleId: '',
      queryParam1: {},
      queryParam2: {},
      dataSource1: [],
      dataSource2: [],
      ipagination1: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter1: {
        column: 'createTime',
        order: 'desc'
      },
      isorter2: {
        column: 'createTime',
        order: 'desc'
      },
      filters1: {},
      filters2: {},
      loading1: false,
      loading2: false,
      selectedRowKeys1: [],
      selectedRowKeys2: [],
      selectionRows1: [],
      selectionRows2: [],
      columns2: [
        {
          title: '人群',
          align: 'center',
          dataIndex: 'username',
          width: 120
        },
        {
          title: '属性',
          align: 'center',
          width: 100,
          dataIndex: 'realname'
        },
        {
          title: '创建时间',
          align: 'center',
          width: 80,
          dataIndex: 'status_dictText'
        }
      ],
      url: {
        dictListUrl: 'toutiao/dictitem/list',
        insertUrl:'template/userorentation/insert'
      }
    }
  },
  methods: {
    handleCancel() {
      this.close()
    },
    handleOk() {},
    add(record) {
      this.id = null;
      this.model = Object.assign({}, record);
      this.visible = true;
      this.gender="NONE";
      this.ageRange=[];
      this.isMobileBrand="NONE";
      this.showMobileBrand=false;
      this.showArticleCategory=false;
      this.tags = [];
      this.isArticleCategory="NONE";
      this.areaType="NONE";
      this.cityStr=[];
      this.areaStr=[];
      this.adTagStr=[];
      this.cityList=[];
      this.areaList=[];
      this.name="";
      this.netType=[];
      this.platformType="NONE";
      this.mobileType=[];
      this.intrestCategoryList=[];
      this.smartFl="0";
      this.intrestType="NONE";
      this.gender="NONE";
      this.ageRange=null;
      this.superiorPopularityType = 'NONE';
      this.deviceTypeChshj = 'NONE';
    },
    edit(record) {
      console.log(record)
      this.visible = true;
      this.gender = record.gender;
      this.ageRange = JSON.parse(record.age);
      this.intrestType = record.intrestType;
      this.platformType = record.platform;
      this.netType = JSON.parse(record.ac)
      console.log(typeof this.netType)
      this.smartFl = record.autoExtendEnabled;
      this.isArticleCategory = record.articleCategoryType;
      this.tags = JSON.parse(record.articleCategory);
      this.isMobileBrand = record.mobileBrand;
      this.mobileType = record.deviceBrand;
      this.name = record.name;
      this.areaType = record.areaType;
      this.cityList = JSON.parse(record.cityStr);
      this.areaList = JSON.parse(record.districtStr);
      this.intrestCategoryList = JSON.parse(record.adTagStr);
      this.cityStr = JSON.parse(record.cityStr);
      this.areaStr = JSON.parse(record.districtStr);
      this.adTagStr = JSON.parse(record.adTagStr);
      this.deviceTypeChshj = record.deviceType;
      this.superiorPopularityType = record.superiorPopularityType;
      this.id = record.id;
      // this.form.resetFields()
      this.model = Object.assign({}, record)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    onSelectChange2(selectedRowKeys, selectionRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectionRows2 = selectionRows
    },
    onClearSelected2() {
      this.selectedRowKeys2 = []
      this.selectionRows2 = []
    },
    onChange(value) {
      console.log(value)
      this.value = value
    },
    changeMobileBrandType(value) {
      console.log(this.isMobileBrand)
      if (this.isMobileBrand == 'BRAND') {
        this.showMobileBrand = true
      } else {
        this.showMobileBrand = false
      }
    },
    changeArticleCategoryType(value) {
      console.log(this.isMobileBrand)
      if (this.isArticleCategory == 'CATEGORY') {
        this.showArticleCategory = true
      } else {
        this.showArticleCategory = false
      }
    },
    onSearch() {
      console.log(...arguments)
    },
    onSelect() {
      console.log(...arguments)
    },
    addData(){
        this.intrestCategoryList.push({ "label": "游戏", "value": 10001 })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          let params = {};
          params.id = this.id;
          params.gender = this.gender;
          params.ageRange = this.ageRange;
          params.intrestType = this.intrestType;
          params.platformType = this.platformType;
          params.netType = this.netType;
          params.smartFl = this.smartFl;
          params.isArticleCategory = this.isArticleCategory;
          params.tags = this.tags;
          params.isMobileBrand = this.isMobileBrand;
          params.mobileType = this.mobileType;
          params.name = this.name;
          params.areaType = this.areaType;
          params.cityList = this.cityList;
          params.areaList = this.areaList;
          params.intrestCategoryList = this.intrestCategoryList;
          params.deviceType = this.deviceTypeChshj;
          params.superiorPopularityType = this.superiorPopularityType;

          console.log(params);
          postAction(this.url.insertUrl,params).then((res)=>{
            console.log(res);
            if(res.success){
              if(null == this.id){
                this.$message.success("投放目标模板创建成功");
              }else {
                this.$message.success("投放目标模板修改成功");
              }
              this.$emit('ok');
              this.close();
            }else{
              this.$message.error(res.message);
            }
          });
        }
      })
    },
    loadData2(arg) {
      if (!this.url.list2) {
        this.$message.error('请设置url.list2属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination2.current = 1
      }
      if (this.currentRoleId === '') return
      let params = this.getQueryParams2() //查询条件
      params.roleId = this.currentRoleId
      this.loading2 = true
      getAction(this.url.list2, params).then(res => {
        if (res.success) {
          this.dataSource2 = res.result.records
          this.ipagination2.total = res.result.total
        }
        this.loading2 = false
      })
    },
    handleTableChange2(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter2.column = sorter.field
        this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination2 = pagination
      this.loadData2()
    }
  },
  created: function() {
    let params = {}
    params.dictId = '2f7d1020ae8c4a1f8af66087d9319139'
    params.pageSize = '1000'
    getAction(this.url.dictListUrl, params).then(res => {
      if (res.success) {
        this.toutiaoSex = res.result.records
      }
    })
    params = {}
    params.dictId = '2b7fe41318c0f0fb4ae5a3cf5269ab04'
    params.pageSize = '1000'
    getAction(this.url.dictListUrl, params).then(res => {
      if (res.success) {
        this.toutiaoAgeRange = res.result.records
      }
    })
    params = {}
    params.dictId = 'c6c75514b5fa17b25dde56d8e7bbc4e9'
    params.pageSize = '1000'
    getAction(this.url.dictListUrl, params).then(res => {
      if (res.success) {
        this.toutiaoNetType = res.result.records
      }
    })
    params = {}
    params.dictId = '7f907c1dab0a65ce6d115e082cd79acf'
    params.pageSize = '1000'
    getAction(this.url.dictListUrl, params).then(res => {
      if (res.success) {
        this.mobileBrandList = res.result.records
      }
    })
    params = {}
    params.dictId = 'defad85851bf6b1751a49b33d8b13b3b'
    params.pageSize = '1000'
    getAction(this.url.dictListUrl, params).then(res => {
      if (res.success) {
        this.articleCategoryList = res.result.records
      }
    })
  }
}
</script>

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