<template>
  <div>
    <a-radio-group v-model:value="value" button-style="solid">
      <a-radio-button value="a">新建模板</a-radio-button>
      <a-radio-button value="b">编辑模板</a-radio-button>
      <a-radio-button value="c">删除模板</a-radio-button>
    </a-radio-group>
  </div>

  <div v-show="value == 'b'" style="margin: 30px 0;">
    <a-select
      ref="select"
      v-model:value="temVal"
      style="width: 220px"
      placeholder="请选择要编辑的模板"
      @change="handleChange"
    >
      <a-select-option v-for="item in TempList" :key="item.id" :x6="item.contentX6" :value="item.name">
        {{ item.contentX6 == null || item.contentX6 == '' ? '无效模版' : item.name }}
      </a-select-option>
    </a-select>
    <a-button @click="getTem">刷新</a-button>
    <a-spin v-show="loadingshow" />
  </div>
  <div v-show="value == 'c'" style="margin: 30px 0;">
    <a-select
      ref="select"
      v-model:value="delTemVal"
      style="width: 220px"
      placeholder="请选择要删除的模板"
      @change="delChange"
    >
      <a-select-option v-for="item in TempList" :key="item.id" :x6="item.contentX6" :value="item.name">
        {{ item.contentX6 == null || item.contentX6 == '' ? '无效模版' : item.name }}
      </a-select-option>
    </a-select>
    <a-button @click="getTem">刷新</a-button>
    <a-button @click="delTem">删除</a-button>
    <a-spin v-show="loadingshow" />
    <a-modal
      v-model:visible="delVisible" title="提示" ok-text="确认"
      cancel-text="取消" @ok="delOk"
    >
      <p>您确认删除{{ delTemVal }}吗？如果是的话，请点击【确认】按钮，否则点击【取消】按钮。</p>
    </a-modal>
  </div>
  <a-divider type="horizontal" />
  <div>
    <a-button @click="next">下一步</a-button>
  </div>
</template>
<script setup>
import { Modal } from 'ant-design-vue';
import { ref,h , onBeforeMount } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { Notify, Uuid } from 'pc-component-v3';
import Common from '../../common/Common.js';
const store = useStore();
const router = useRouter();
const temVal = ref();
const delTemVal = ref();
const TempList = ref([]);
const loadingshow = ref(false);
const template = ref('');
const tempId = ref('');
const value = ref('a');

const delVisible = ref(false);
// const visible = ref(false);

const handleChange = (_,val) =>{
  // console.log(val);
  store.commit('changeTempText',val.value);
  store.commit('changeTemplate',val.x6);
  store.commit('changeTemplateId',val.key);
  // template.value = val.x6;
  // tempText.value = val.name;
};

const delChange = (_,val) =>{
  // console.log(val);
  tempId.value = val.key;
};
const getTem = () =>{
  loadingshow.value = true;
  //  重新发请求获取模版列表
  getTemp();
};
const delTem = () =>{
  if (delTemVal.value == undefined) return;
  delVisible.value = true;
};
const next = () =>{
  if (value.value == 'a') {
    store.commit('changeTemplateId','');
    store.commit('changeTemplate','');
    store.commit('changeTempText','新建模板');
  }
  if ((value.value == 'b' && temVal.value == undefined || null) || value.value == 'c') {
    Modal.info({
      title: '提示',
      content: h('div', {}, [h('p', '请先选择模版或新建模板！')]),
      onOk() {
        // console.log('ok');
      },
    });
    return;
  }

  store.commit('changeStep',1);
};

const delOk = () =>{
  delVisible.value = false;
  loadingshow.value = true;
  // 发请求删除模版
  $.ajax({
    url:'/api/printPageResource',
    type:'post',
    dataType:'json',
    data:{
      templateId:tempId.value,
    },
    beforeSend: function(request) {
      Common.addTokenToRequest(request);
    },
    success:()=>{
      loadingshow.value = false;
      Modal.info({
        title: '提示',
        content: h('div', {}, [h('p', '删除成功！')]),
        onOk() {
          // console.log('ok');
          delTemVal.value = undefined;
          temVal.value = undefined;
          getTemp();
        },
      });
      // console.log(res);
    },
    error:e=>{
      loadingshow.value = false;
      Common.processException(e);
    },
  });
};

// 获取模版数据
const getTemp = () =>{
  $.ajax({
    url:'/api/printPageResource/loadCustomerTemplateX6',
    type: 'get',
    contentType: 'application/json',
    beforeSend: function(request) {
      Common.addTokenToRequest(request);
    },
    success:({errorCode,datas,errorMessage})=>{
      loadingshow.value = false;
      if (errorCode == 0) {
        TempList.value = datas;
        // console.log(datas);
      }else{
        TempList.value = [];
        Modal.info({
          title: '提示',
          content: h('div', {}, [h('p', '没有基础模版，请新建模版数据！')]),
          onOk() {
            // console.log('ok');
            delTemVal.value = undefined;
            temVal.value = undefined;
            TempList.value = [];
          },
        });
        // Notify.error('提示', errorMessage, false);''
      }

    },
    error:e=>{
      loadingshow.value = false;
      Common.processException(e);
    },
  });
};
onBeforeMount(()=>{
  getTemp();
});
</script>