
<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title="vdata.isAdd ? '新增模版' : '编辑模版'"
    width="80%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form
      ref="infoFormModel"
      :model="vdata.saveObject"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      :rules="rules">

      <a-row justify="center" type="flex">
        <a-col :span="24">
          <a-form-item label="code" name="code">
            <a-input v-model:value="vdata.saveObject.code" :disabled="!vdata.isAdd"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="资质名称" name="name">
            <a-input v-model:value="vdata.saveObject.name" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row  v-if="(vdata.groupKey == 'agentAdvert' || vdata.groupKey == 'mchAdvert' || vdata.groupKey == 'faceAdvert' || vdata.groupKey == 'appMchAdvert' || vdata.groupKey == 'appAgentAdvert')"
      >
        <a-divider orientation="left">资质模版设置</a-divider>
  
        <a-col v-if="vdata.saveObject.appPlaceType != 1 && (vdata.saveObject.appPlaceType == 3 || vdata.saveObject.appPlaceType == 4)" :span="24">
          <a-form-item label="轮播时间（秒）" name="changeTime">
            <a-input-number v-model:value="vdata.saveObject['changeTime']" style="width: 100%;" :min="0" :max="100" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-button   class="editable-add-btn"  style="margin-bottom: 8px;margin-left: 30px;"   type="dashed"  @click="handleAdd" >  <PlusOutlined />新增
          </a-button>
          <span v-if="vdata.saveObject.appPlaceType == 1" style="margin-left: 15px;">卡片模版最多添加两张图片！</span>
          <div v-if="vdata.groupKey == 'appMchAdvert' || vdata.groupKey == 'appAgentAdvert'" style="margin:10px 30px"> <a-alert message="注意：小程序打开链接需配置合法请求域名!" type="warning" /></div>
          <div v-if="vdata.saveObject.appPlaceType == 1" style="margin:10px 30px"> <a-alert message="模版图片单张建议宽度680px,建议最大高度680px 多张建议宽度320px,建议最大高度400px。" type="warning" /></div>
          <a-table bordered :data-source="vdata.saveObject.infoList" :columns="columns">
            <template #headerCell="{ title, column }">
              <a-tooltip v-if="column.ellipsis" :title="title" :overlayStyle="{ whiteSpace: 'nowrap',maxWidth:'1000px'}">
                {{ title }}
              </a-tooltip>
              <div v-else>{{ title }}</div>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'imgUrl'">
                <div>
                  <a-radio-group v-model:value="record.inputType" >
                    <a-radio value="file">  示例图 </a-radio>
<!--                    <a-radio value="text"> 文本 </a-radio>-->
                  </a-radio-group>
                </div>
                <div class="editable-cell" v-if="record.inputType == 'file'">
                  <div class="editable-cell-input-wrapper">
                    <JeepayUpload v-model:src="record.imgUrl" bizType="notice" listType="picture-card" />
                  </div>
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'name'">
                <div class="editable-cell-input-wrapper">
                  <a-input v-model:value="record.name"  />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'linkUrl' && vdata.groupKey != 'faceAdvert'">
                <div class="editable-cell-input-wrapper">
                  <a-input v-model:value="record.linkUrl" placeholder="请以http://或https://开头" />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <a style="color: red" @click="onDelete(record)">删除</a>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>

    </a-form>


    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false"><close-outlined /> 取消</a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined /> 保存</a-button>
    </div>
  </a-drawer>
  <!-- 选择商户组件 -->
  <JeepayModelSelectMchList ref="jeepayModelSelectMchRef" @selectFinishFunc="selectQrcFinishFunc" />
</template>
<script lang="ts" setup>
import {req, API_URL_APTITUDE_SAVE, API_URL_APTITUDE_update} from '@/api/manage'

import { reactive, ref, getCurrentInstance, computed ,watch} from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoFormModel = ref()
const jeepayModelSelectMchRef = ref()

const props = defineProps({
  callbackFunc: { type: Function, default: () => { } },
  columnsType: { type: Number, default: 0 }
})


const columnsObj: any = {
  0: [
    { title: '模版名称', dataIndex: 'name', },
    { title: '填充类型', dataIndex: 'imgUrl', width: '30%',ellipsis:true, },
    { title: '操作', dataIndex: 'operation', },
  ],
  1: [
    { title: '模版名称', dataIndex: 'name', },
    { title: '填充类型', dataIndex: 'imgUrl', width: '30%',ellipsis:true,},
    { title: '轮播图链接', dataIndex: 'linkUrl', },
    { title: '操作', dataIndex: 'operation', },
  ],

}
// 侦听数据 发成变化 重新赋值表头
watch(() => props.columnsType, () => {
  columns.value = columnsObj[props.columnsType]
})

const columns = ref(columnsObj[props.columnsType])
const count = computed(() => vdata.saveObject.infoList.length + 1)

const onDelete = (item) => {
  // vdata.saveObject.infoList = vdata.saveObject.infoList.filter(item => item.key !== key)
  const index = vdata.saveObject.infoList.indexOf(item)
  if (index != -1) {
    vdata.saveObject.infoList.splice(index, 1)
  }
}

const handleAdd = () => {
  if (vdata.saveObject.appPlaceType == '1' && vdata.saveObject.infoList.length > 1) {
    return $infoBox.message.error('卡片模版最多添加两条记录！')
  }
  const newData = { key: `${count.value}`, inputType: `file`,  imgUrl: ``, name: '', linkUrl: ``, }
  vdata.saveObject.infoList.push(newData)
}

const vdata: any = reactive({
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  saveObject: {
    infoList: [{ key: '0', inputType: `file`, imgUrl: '', linkUrl: '', name: '' }]
  } as any, // 数据对象
  recordId: null, // 更新对象ID
  groupKey: '',
})

const rules = {
  title: [{ required: true, message: '请输入模版标题', trigger: 'blur' }],
  releaseState: [{ required: true, message: '请选择发布状态', trigger: 'blur' }],
  imgUrl: [{ required: true, message: '请上传模版图片', trigger: 'blur' }],
  linkUrl: [{ required: true, message: '请输入模版链接', trigger: 'blur' }],
  content: [{ required: true, message: '请输入模版内容', trigger: 'blur' }],
  bindType: [{ required: true, message: '请选择发布商户类型', trigger: 'blur' }],
  infoIds: [{ required: true, message: '请选择要发布的商户', trigger: 'blur' }],
  appPlace: [{ required: true, message: '请选择模版位置', trigger: 'blur' }],
  appPlaceType: [{ required: true, message: '请选择模版类型', trigger: 'blur' }],
  advertSort: [{ required: true, message: '请输入模版排序', trigger: 'blur' }],
  changeTime: [{ required: true, message: '请输入轮播时间', trigger: 'blur' }],
}


function show(groupKey, recordId, searchData) { // 弹层打开事件
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }
  console.log(groupKey,'groupKey')
  vdata.groupKey = groupKey
  vdata.isAdd = !recordId
  
  // 数据恢复为默认数据
  vdata.saveObject = { bindType: 0, releaseState: 1 }
  vdata.saveObject.infoList = [{ imgUrl: '', linkUrl: '', name: '' }]

  vdata.confirmLoading = false // 关闭loading
  if (searchData) {
    Object.assign(vdata.saveObject, searchData)
  }
  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    // vdata.recordId = recordId.recordId
    // req.getById(API_URL_APTITUDE_SAVE, vdata.recordId).then(res => {
    //
    // })
    vdata.saveObject = recordId
    if (vdata.saveObject.params) {
      vdata.saveObject.infoList = vdata.saveObject.params
    }
  }
  vdata.isShow = true // 立马展示弹层信息
}

function handleOkFunc() { // 点击【确认】按钮事件
  infoFormModel.value.validate().then(valid => {

    vdata.confirmLoading = true // 显示loading
    vdata.confirmLoading = false

    // return false;

    let list = vdata.saveObject.infoList;
    console.log(list,'vdata.saveObjectvdata.saveObject')
    var infoList = vdata.saveObject.infoList;
    for (var i=0;i<infoList.length;i++){
      list[i].propertyName =  infoList[i].imgUrl as any
      list[i].name =  infoList[i].name as any
      list[i].inputType =  infoList[i].inputType as any
      // delete list[i].imgUrl
      // delete list[i].name
      // delete list[i].inputType

      // list.push({
      //   propertyName:propertyName,
      //   name:name,
      //   inputType:inputType,
      // })
    }
    if(list.length == 0){
      $infoBox.message.error('请配置模版！')
    }

    if(!vdata.isAdd){
      // 请求HTTP
      req.addOrUpdate(vdata.isAdd ? null : vdata.recordId, API_URL_APTITUDE_update, {params:list,code:vdata.saveObject.code,name:vdata.saveObject.name}).then(res => {
        vdata.isShow = false
        vdata.confirmLoading = false
        props.callbackFunc() // 刷新列表
      }).catch(valid => {
        vdata.confirmLoading = false
      })
    }else{
      // 请求HTTP
      req.addOrUpdate(vdata.isAdd ? null : vdata.recordId, API_URL_APTITUDE_SAVE, {params:list,code:vdata.saveObject.code,name:vdata.saveObject.name}).then(res => {
        vdata.isShow = false
        vdata.confirmLoading = false
        props.callbackFunc() // 刷新列表
      }).catch(valid => {
        vdata.confirmLoading = false
      })
    }
  })
}

// 选择商户弹窗
function showQrcSelectModel() {
  if (vdata.saveObject.bindType == 1) {
    jeepayModelSelectMchRef.value.show(vdata.saveObject.infoIds, { advertFlag: '1' })
  }
}

// 选择商户完成
function selectQrcFinishFunc(e) {

  if (!e || e.length <= 0) {
    return $infoBox.message.error('请选中要发布模版的商户！')
  }

  vdata.saveObject.infoIds = e
  jeepayModelSelectMchRef.value.close()
}

function appPlaceTypeFunc(e) {
  console.log(e)
  if (vdata.saveObject.appPlaceType == 1 && vdata.saveObject.infoList.length > 2) {
    vdata.saveObject.infoList = vdata.saveObject.infoList.splice(0, 2)
  }
  if(e.target.value ==2){
    columns.value[0].title = '模版图片（建议尺寸 680 x 300px）'
  }else if(e.target.value ==1){
    columns.value[0].title = '模版图片'
  }
}
// 切换模版位置
const adRadioChange=(e:any)=>{
  if(e.target.value ==1){
    columns.value[0].title = '模版图片（建议尺寸 1080 x 1882px）'
  }else{
    console.log(vdata.saveObject?.appPlace)
    if(vdata.saveObject?.appPlaceType) return appPlaceTypeFunc({target:{value:vdata.saveObject.appPlaceType}})
    columns.value[0].title = '模版图片'
  }
  
}
watch(()=>vdata.groupKey,()=>{

  if( vdata.groupKey=='mchAdvert' || vdata.groupKey=='agentAdvert'){
    columns.value[0].title = '模版图片（建议尺寸 960 x 500px）'
  }else if(props.columnsType==1){
    columns.value[0].title = '模版图片'
  }
})
defineExpose({ show })
</script>
<style lang="less" scoped>
.ant-btn-dangerous {
  position: absolute;
  right: 50px;
}

.ant-row-space-between {
  position: relative;
}

</style>