<template>
  <Search :search="search" :reset="reset">
    <template v-slot:body>
      <el-form-item label="巨量账户ID">
        <el-input placeholder="请输入巨量账户ID" class="input" icon="search" v-model="query.account_id" clearable></el-input>
      </el-form-item>
	  <el-form-item label="回传配置ID">
	    <el-input placeholder="请输入回传配置ID" class="input" icon="search" v-model="query.id" clearable></el-input>
	  </el-form-item>
	  <el-form-item label="关联推广ID">
	    <el-input placeholder="关联推广ID" class="input" icon="search" v-model="query.promotion_id" clearable></el-input>
	  </el-form-item>
    <!--  <el-form-item label="巨量账户">
        <el-input placeholder="请输入巨量账户" class="input" icon="search" v-model="query.account_name" clearable></el-input>
      </el-form-item> -->
    </template>
  </Search>
  <div class="table-default">
    <div class="pt-5 pl-2" v-action="'callback.JuliangAccount.addAccount'">
      <el-button type="primary" size="default" @click="openForm(null)">新增账户</el-button>
      <el-button type="primary" size="default" @click="mulSet">批量设置</el-button>
    </div>
    <el-table :data="tableData" class="mt-3" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80"></el-table-column>
	   <el-table-column label="回传配置ID" width="260" prop="id"></el-table-column>
      <el-table-column label="巨量账户ID" width="260" prop="adv_account_id"></el-table-column>
      <!-- <el-table-column label="巨量账户" width="260" prop="adv_account_name"></el-table-column> -->
      <el-table-column label="回传开关" width="150" v-action="'callback.JuliangAccount.turnCallbackState'">
        <template #default="scope">
          <div>
            <el-switch v-model="scope.row.state" @change="switchStatus(scope.row)" :active-value="1" :inactive-value="0">
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="关联推广名称" width="260" prop="promotion_name">
      </el-table-column>
      <el-table-column label="关联推广ID" width="260" prop="promotion_id">
		<template #default="scope">
			   <el-button link type="primary" size="small" @click="goToPromotion( scope.row)" >{{scope.row.promotion_id}}</el-button>
		 </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)"
            v-action="'callback.JuliangAccount.updateCallbackConfig'">回传配置</el-button>
          <br />
          <el-button link type="primary" v-if="scope.row.promotion_id >  0" size="small" @click="handleCancel(scope.row)"
            v-action="'callback.JuliangAccount.unbindPromotion'">取消推广回传关联</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paginate />
  </div>
  <!-- 设置回传配置 -->
  <Dialog v-model="paybackVisible" title="设置回传配置" width="80%" destroy-on-close>
    <paybackConfig @close="closeType('paybackVisible')" :primary="currentPayback"></paybackConfig>
  </Dialog>

  <Dialog v-model="addAccountVisible" title="添加账户" width="80%" destroy-on-close>
    <create @close="closeType('addAccountVisible')"></create>
  </Dialog>
</template>

<script lang="ts"  setup>
import { InfoFilled } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import create from './form/create.vue';
import paybackConfig from './form/paybackConfig.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { callbackJuliangAccountTurnCallbackState, callbackJuliangAccountUnbindPromotion } from '@/api/backConfig/index'
const router = useRouter();
const route = useRoute();
const api = 'callback/juliangAccount/list';

const { data, query, search, reset, loading } = useGetList(api, true);
const tableData = computed(() => data.value?.data);
const addAccountVisible = ref(false)
const currentPayback = ref({})

const multipleSelection = ref([])
const paybackVisible = ref(false) //设置回传弹窗

const closeType = (type: string) => {
  switch (type) {
    case 'paybackVisible':
      paybackVisible.value = false
      break;
    case 'addAccountVisible':
      addAccountVisible.value = false
      break;
  }
  search()
}

const switchStatus = (data: object) => {
  console.log({ id: data.id, state: data.state }, 'data', data);
  callbackJuliangAccountTurnCallbackState({ id: data.id, state: data.state }).then(res => {
    ElMessage.success(res.message)
    search()
  })
}
const goToPromotion = (row: object) =>{
	 router.push({ path: '/promotion/promotionList', query: { tab: 1,id:row.promotion_id } })
}
	

const handleCancel = (row: object) => {
  ElMessageBox.confirm(
    `解绑后此回传账户所有数据重新计算（包括比例/保护数）,确定要取消 ${row.adv_account_name} 推广回传关联吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      callbackJuliangAccountUnbindPromotion({ id: row.promotion_id }).then(res => {
        ElMessage.success(res.message)
        search()
      })
    })
    .catch(() => {

    })
}
// 批量设置
const mulSet = () => {
  if (multipleSelection.value.length <= 0) {
    return ElMessage.warning('至少选择一条数据');
  } else {
    const content = '确定批量设置回传比例吗？'

    ElMessageBox.confirm(
      content,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        paybackVisible.value = true;
        currentPayback.value = {
          account_id: '',
          account_name: '',
          min_money: null,
          max_money: null,
          state: 1,
          protect_num: 0,
          default_rate: 0,
          rate_time_config: [],
        }
        currentPayback.value.ids = multipleSelection.value.map(el => el.id)
        currentPayback.value.account_ids = multipleSelection.value.map(el => el.adv_account_id)
      })
      .catch(() => {

      })
  }
}
// 回传配置
const handleEdit = (index, row) => {
  console.log(row)
  currentPayback.value = row
  if (typeof row.rate_time_config == 'string') {
    currentPayback.value.rate_time_config = JSON.parse(row.rate_time_config)
  } else {
    currentPayback.value.rate_time_config = row.rate_time_config
  }
  currentPayback.value.rate_time_config = currentPayback.value.rate_time_config.map(el => {
    return {
      ...el,
      time: [el.start_time, el.end_time]
    }
  })
  currentPayback.value.account_name = currentPayback.value.adv_account_name
  currentPayback.value.ids = [currentPayback.value.id]
  currentPayback.value.ids = [currentPayback.value.id]
  currentPayback.value.account_ids = [currentPayback.value.adv_account_id]
  paybackVisible.value = true
}
// 全选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
}

const openForm = (data: any) => {
  addAccountVisible.value = true
};
onMounted(() => {
query.value.id = route.query.id 
  search();
});
</script>
<style  lang='scss' scoped></style>
