<style>
  #table_time_selected1 tr {
    border: 1px solid rgb(102, 162, 243);
  }

  .plug-timer-grid th {
    line-height: 25px;
  }

  .group-creat .ant-form-item-required::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '';
  }

  .else-label .ant-form-item-label label::after {
    content: '';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
  }
</style>
<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
    <a-row class="image-list-heading vm-panel">
      <a-col :span="24" style="display:flex">
        <Treeselect :appId.sync="appId" :multiple="false" style="margin:8px 0px" />
        <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
      </a-col>
    </a-row>
    <a-button type="primary" @click="addModule" :disabled="!appId">
      创建模板
    </a-button>
    <a-row style="margin-top:15px">
      <a-table size="middle" :columns="columns" :dataSource="dataList" bordered :pagination="ipagination">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-row>
    <a-modal v-model="visible" title="模板创建" :width="900" v-if="visible" :maskClosable="false" @cancel='newTemplateCancel'>
      <a-form-item label="模板名称" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <a-input placeholder="请输入模板名称" v-model="name" style="width:100%;position:relative;" />
      </a-form-item>

      <targeted-population ref="population" :populationData.sync="populationData"></targeted-population>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleSubmit">
          确定
        </a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction,
    putAction
  } from '@/api/manage'
  import moment from 'moment'
  import {
    mapGetters
  } from 'vuex'
  import jq from 'jquery'
  import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/newModulePop.vue'
  export default {
    name: 'new-mould',
    components: {
      targetedPopulation,
      Treeselect
    },
    data() {
      return {
        dataList: [],
        name: '',
        columns: [{
            title: '模板名称',
            align: 'center',
            dataIndex: 'templateName',
            scopedSlots: {
              customRender: 'templateName'
            }
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime',
            scopedSlots: {
              customRender: 'createTime'
            }
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        appId: '',
        populationData: {
        },
        active: 'add',
        editId: '',
        visible: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          onChange: current => {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.addUser()
          },
          total: 0
        }
      }
    },
    computed: {},
    filters: {},
    methods: {
      addModule() {
        this.visible = true
        this.populationData = {}
        this.active = 'add'
        localStorage.setItem('accountIdNewMoudle', this.appId)
      },
      handleSubmit(e) {
        //   this.$refs.population.handleSubmit()
        e.preventDefault()
        if(this.name){

        this.$refs.population.handleSubmit()
        var data = this.populationData
        console.log(JSON.stringify(data))
        // this.$bus.$emit('remove', '/account/stepForm')
        // this.$bus.$emit('remove', '/account/advertisingGroup')
        // this.$bus.$emit('remove', '/account/originality')
        if (this.active == 'add') {
          postAction('/kuaishou/batch/addDirectionalTemplate', {
            accountId: this.appId,
            templateName: this.name,
            templateContent: JSON.stringify(this.populationData)
          }).then(res => {
            console.log(res)
            if (res.success) {
              this.visible = false
              this.populationData = {}
              this.name = ''
              this.addUser()
            }
          })
        } else if (this.active == 'edit') {
          putAction('/kuaishou/batch/editDirectionalTemplate', {
            id: this.editId,
            templateName: this.name,
            templateContent: JSON.stringify(this.populationData)
          }).then(res => {
            console.log(res)
            if (res.success) {
              this.visible = false
              this.populationData = {}
              this.name = ''
              this.addUser()
            }
          })
        }
        
        }else{
          this.$message.error('请输入模板名字')
        }
      },
      getData(className) {
        return this.form.getFieldValue(className)
      },
      handleEdit(item) {
        this.active = 'edit'
        this.editId = item.id
        this.name = item.templateName
        this.populationData = JSON.parse(item.templateContent)
        localStorage.setItem('accountIdNewMoudle', this.appId)
        console.log(item.templateContent)
        this.visible = true
      },
      newTemplateCancel(){
        this.active = ''
        this.editId = undefined
        this.name = ''
        this.populationData = {}
        this.visible = false
      },
      handleDelete(id) {
        deleteAction('/kuaishou/batch/deleteDirectionalTemplate', {
          id: id
        }).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.addUser()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      addUser() {
        this.loading = true
        this.dataList = []
        var params = {}
        params.accountId = this.appId + ''

        if (this.appId) {
          localStorage.setItem('accountIdNewMoudle', this.appId)
          getAction('/kuaishou/batch/pullPopulationList', params).then(res => {
            getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
              if (res.success) {
                this.dataList = res.result.map((item, index) => {
                  return {
                    ...item,
                    key: index
                  }
                })
                this.ipagination.total = res.result.length
              }
            })
          })

        } else {
          this.$message.error('请选择账户')
        }
      }
    },
    mounted: function () {
      //   /kuaishou/batch/getDirectionalTemplate
    }
  }
</script>