<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="广告主开户主体名称">
              <a-input placeholder="请输入广告主开户主体名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="行业">
              <j-tree-select
                v-model="queryParam.industryId"
                ref="treeSelect"
                placeholder="请选择行业"
                dict="sys_category,name,id"
                pidField="pid"
                pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
              >
              </j-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <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-modal
        title="账号绑定"
        v-model="visible"
        @ok="handleSubmit"
        :width="800"
        :okButtonProps="{ props: { disabled: false } }"
        :cancelButtonProps="{ props: { disabled: false } }"
      >
        <a-form>
          <a-form-item
            label="选择方式"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group buttonStyle="solid" @change="onChageLogin" v-model="mode">
              <a-radio-button value="login">登录</a-radio-button>
              <a-radio-button value="authorization">授权</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-if="showLogin">
            <a-form :form="form">
              <!-- @submit="loginForm">-->
              <a-form-item
                label="账号："
                :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <a-input v-model="accountName" placeholder="请输入账户名" />
              </a-form-item>
              <a-form-item
                label="密码："
                :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <a-input type="password" v-model="password" placeholder="请输入密码" />
              </a-form-item>
              <a-form-item
                label="媒体："
                :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <a-radio-group buttonStyle="outline" v-model="loginType">
                  <a-radio-button value="kuaishou">快手</a-radio-button>
                  <a-radio-button value="bytedance">头条</a-radio-button>
                </a-radio-group>
              </a-form-item>

              <a-form-item
                label="部门分配"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
                v-show="!departDisabled"
              >
                <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
              </a-form-item>

              <a-form-item
                label="用户选择"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
              </a-form-item>
            </a-form>
          </a-form-item>

          <a-form-item
            v-if="showAuthorization"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-form :form="form">
              <!--@submit="authorizationForm"-->

              <a-form-item
                label="媒体："
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <a-radio-group buttonStyle="outline" v-model="authorizationType">
                  <a-radio-button value="kuaishou">快手</a-radio-button>
                  <a-radio-button value="bytedance">头条</a-radio-button>
                </a-radio-group>
              </a-form-item>

              <a-form-item
                label="部门分配"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
                v-show="!departDisabled"
              >
                <j-select-depart v-model="departmentId" :multi="false"></j-select-depart>
              </a-form-item>

              <a-form-item
                label="用户选择"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
              >
                <j-select-user-by-dep v-model="users"></j-select-user-by-dep>
              </a-form-item>
            </a-form>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <advertiser-modal ref="modalForm" @ok="modalFormOk"></advertiser-modal>
    <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
  </a-card>
</template>

<script>
import AdvertiserModal from './modules/AdvertiserModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSelectUser from '@/components/jeecgbiz/JSelectUser'
import { postAction } from '../../../api/manage'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'AdvertiserList',
  mixins: [JeecgListMixin],
  components: {
    AFormItem,
    AdvertiserModal,
    JTreeSelect,
    JSelectUserByDep,
    JSelectDepart,
    JSelectUser
  },
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      users: this.userInfo().realname, //用户名称
      departmentId: this.userInfo().departId, //部门id
      description: '广告主信息表管理页面',
      visible: false,
      accountName: '',
      password: '',
      mode: 'login',
      showLogin: true,
      showAuthorization: false,
      authorizationType: 'kuaishou',
      loginType: 'kuaishou',
      form: this.$form.createForm(this),
      // 表头
      columns: [
        {
          title: '广告主开户主体名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '行业',
          align: 'center',
          dataIndex: 'industryId_dictText'
        },
        {
          title: '联系人姓名',
          align: 'center',
          dataIndex: 'contact'
        },
        {
          title: '联系人手机',
          align: 'center',
          dataIndex: 'mobile'
        },
        {
          title: '联系人邮箱',
          align: 'center',
          dataIndex: 'email'
        },
        {
          title: '销售',
          align: 'center',
          dataIndex: 'saleId_dictText'
        },

        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/ctop/advertiser/list',
        delete: '/ctop/advertiser/delete',
        deleteBatch: '/ctop/advertiser/deleteBatch',
        exportXlsUrl: 'ctop/advertiser/exportXls',
        importExcelUrl: 'ctop/advertiser/importExcel',
        bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
        bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
        getLoginInfo: '/ctop/bindAccount/getLoginInfo',
        userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
        userWithDepart: '/sys/user/userDepartList' // 引入为指定用户查看部门信息需要的url
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.queryParam.userId = this.userInfo().id
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    searchRe() {
      this.queryParam.name = ''
      this.queryParam.industryId = ''
      this.loadData()
    },
    handleSubmit() {
      let params = {}
      params.advertiserId = this.record.id
      params.advertiser_name = this.record.name
      params.userId = this.userInfo().id
      params.userName = this.userInfo().realname
      params.projectId = this.record.projectId
      params.projectName = this.record.projectName

      // 触发表单验证
      this.form.validateFields(err => {
        if (!err) {
          if (this.mode == 'login') {
            params.accountName = this.accountName
            params.password = this.password
            params.loginType = this.loginType
            if (this.loginType == 'kuaishou') {
              params.mediaId = 2
            } else if (this.loginType == 'bytedance') {
              params.mediaId = 1
            }
            postAction(this.url.bindAccountLoginUrl, params).then(res => {
              if (res.success) {
                alert('绑定成功')
                this.accountName = ''
                this.password = ''
                this.loginType = ''
              } else {
                alert(res.message)
              }
            })
          }
          // 授权登录
          if (this.mode == 'authorization') {
            params.authorizationType = this.authorizationType
            if (this.authorizationType == 'kuaishou') {
              params.mediaId = 2
            } else if (this.authorizationType == 'bytedance') {
              params.mediaId = 1
            }
            postAction(this.url.bindAuthorizationUrl, params).then(res => {
              if (res.success) {
                window.open(res.message, '_blank')
              } else {
                alert('绑定失败')
              }
            })
          }
        }
      })
    },

    onChageLogin() {
      console.log(this.mode)
      if (this.mode == 'login') {
        this.showLogin = true
        this.showAuthorization = false
      } else {
        this.showLogin = false
        this.showAuthorization = true
      }
    },
    showModal(record) {
      this.record = record
      this.visible = true
    },

    handleCancel() {
      this.close()
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
