<template>
  <div v-if="!showCreate">
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <el-form-item label="模板名称">
          <el-input v-model="query.name" clearable />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <div class="pt-5 pl-2">
        <Add @click="openForm(null)" v-action="'channel.payTemplate.store'" />
      </div>
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="status_str" label="是否为默认模板" v-if="!rolesIdentify.includes('optimizer')" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm(scope.row)"
              v-action="'channel.payTemplate.update'">编辑</el-button>
            <el-button link type="primary" size="small" @click="openDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <el-dialog v-model="dialogVisible" title="查看详情" width="30%">
      <div class="device-wrap" style="margin:0 auto;">
        <div class="md-iphone-5 md-white-device">
          <div class="md-body">
            <div class="md-buttons"></div>
            <div class="md-front-camera"></div>
            <div class="md-top-speaker"></div>
            <div class="md-screen">
              <img src="@/assets/pay-config-bg.jpg" alt="" />
              <div class="preview-list">
                <div class="pay-item" v-for="(row, i) in detailData" :key="i"
                  :class="[row.is_default == 1 ? 'defalut' : '']">
                  <p>{{ row.price }}元</p>
                  <p v-show="row.given">多送{{ row.given }}看币</p>
                  <div class="tipss">{{ gearsName[row.type] }}</div>
                </div>
              </div>
            </div>
            <button class="md-home-button"></button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>

  <Create v-else @close="cancel(search)" :primary="primary" :api="editapi" />
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import Create from './form/create.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { channelPaytemplateShow } from '@/api/charge/index'
const api = 'channel/paytemplate/list';
let editapi = 'system/notices/notice/edit';
const rolesIdentify = inject('rolesIdentify')
const dialogVisible = ref(false)
const detailData = ref([])
let showCreate = ref(false)
const gearsName = ref({
  FIRST_COIN: "首充",
  COIN: "普通充值",
  YEAR: "包年",
  QUARTER: "包季",
  MONTH: "包月",
})
const { data, query, search, reset, loading } = useGetList(api, true);
const tableData = computed(() => data.value?.data);
const primary = ref({})
const current = ref({})
const openDetail = (row: object) => {
  current.value = row;
  channelPaytemplateShow(row.id).then(res => {
    dialogVisible.value = true;
    detailData.value = res.data.template_item_list
  })
}
const openForm = (data: any) => {
  showCreate.value = true
  if (data) {
    primary.value = data.id
  } else {
    primary.value = data
  }
};
const cancel = () => {
  showCreate.value = false
  search()
};
const resetQuery = () => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 2 });
  search()
}
onMounted(() => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 2 });
  search();
});
</script>
<style lang="scss" scoped>
.device-wrap {
  width: 350px;
  margin-left: 20px;
  margin-top: 20px;

  img {
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .preview-list {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    padding: 15px;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  }

  .pay-item {
    width: 46%;
    margin-right: 4%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: #e6e6e6;
    border-radius: 10px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;

    &.defalut {
      border: 1px solid #fd555d;
    }

    .tipss {
      position: absolute;
      right: 0;
      height: 20px;
      line-height: 20px;
      top: 0;
      padding: 0 4px;
      background-color: #fd555d;
      color: #fff;
      font-size: 12px;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    p {
      width: 100%;
      line-height: 20px;
      color: #000;
      font-size: 12px;
      text-align: center;

      &:first-child {
        font-size: 14px;
        font-weight: bold;

        span {
          display: inline-block;
          padding: 0 2px;
          background: #fd555d;
          color: #fff;
          font-size: 10px;
          margin-left: 5px;
          vertical-align: top;
          transform: scale(0.8);
        }
      }

      &:last-child {
        color: #666;
      }
    }
  }
}
</style>
