<template>
  <div class="app-container">
    <div class="app-container-search main-radius">
      <h1 class="">小程序模板管理</h1>
    </div>
    <div class="temp-container">
      <div
        v-for="(item,index) in tempList"
        :key="index"
        class="temp-items"
      >
        <div class="temp-top">
          <el-image
            class="appTempBg"
            :src="item.bgUrl"
            fit="cover"
          />
        </div>
        <div class="temp-content">
          <div class="mr-10">{{item.templateName}}</div>
          <el-tag class="mr-10" size="small" v-if="item.defaultTemplate">默认</el-tag>
        </div>
        <div class="temp-btns">
          <i class="el-icon-view temp-tip-icon" @click="showPreview(index)"></i>
          <i class="el-icon-edit temp-tip-icon" @click="toSetting('/configue/uni-template/detail',item.id)"></i>
          <i class="el-icon-delete temp-tip-icon" v-if="!item.defaultTemplate" @click="deleteTemp(item.id)"></i>
        </div>
      </div>
      <div class="temp-add-btn" @click="toSetting('/configue/uni-template/detail')">
        <i class="el-icon-plus"></i>
        <div class="el-add-text">添加模板</div>
      </div>
    </div>
    <!-- 分页组件 -->
    <div class="pageList">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNo"
        :limit.sync="searchForm.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="415px"
      heigth="950px"
      class="preview-dialog"
      close-on-click-modal
    >
      <div class="preview-dialog-content" >
        <appPreview :info="previewInfo" ></appPreview>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUniTemplatePage, deleteUniTemplate } from "@/api/configure/uniTemplate";

import appPreview from '@/components/Customer/appPreview';
export default {
  name: "UniTemplate",
  components: {
    appPreview
  },
  data() {
    return {
      tempList: [
      ],
      total: 0,
      searchForm:{
        pageNo: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      previewInfo: {
        templateItemList: [],
      },
      // 展示内容（农事作业等）
      operateDate: {},
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.searchForm = {
      pageNo: 1,
      pageSize: 10,
    };
    this.getList();
  },
  methods: {
    toSetting(path,id){
      this.$router.push({
        path,
        query:{
          id,
        }
      })
    },
    showPreview(index) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const data = this.tempList[index];
        this.previewInfo = {
          ...data,
          templateItemList: data.templateItemList.map((item, index) => {
            return {
              ...item,
              name: '节点' + (index + 1),
            };
          }),
        };
        console.log(this.previewInfo);
      });
    },
    deleteTemp(id) {
      this.$confirm('确认删除该模板？')
       .then(() => {
          deleteUniTemplate(id).then(() => {
            this.$message.success('删除成功');
            this.getList();
          });
        })
       .catch(() => {
          this.$message.info('已取消');
        });
    },
    async getList() {
      let res = await getUniTemplatePage(this.searchForm);
      if(res.data && res.data.total){
        this.tempList = res.data.list;
        this.total = res.data.total;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
  .temp-container{
    display: flex;
    flex-wrap: wrap;
    .temp-items{
      flex: 1;
      max-width: calc(25% - 10px);
      min-width: calc(25% - 10px);
      margin: 5px;
      .temp-top{
        position: relative;
        padding: 24px 0;
        height: 270px;
        .appTempBg{
          width: 100%;
          height: 270px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
        }
        .appTempLogo{
          position: absolute;
          top: 84px;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1;
          width: 60px;
          height: 60px;
        }
        .temp-tip{
          width: 90%;
          max-width: 220px;
          margin: 0 auto;
          height: 28px;
          position: absolute;
          z-index: 1;
          bottom: 24px;
          left: 0;right: 0;
          border-radius: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          .temp-tip-icon{
            color: #ffffff;
          }
          .temp-tip-text{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 26px);
            margin-left: 6px;
          }
        }
      }
      .temp-content{
        background-color: #ffffff;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        font-size: 16px;
        border-bottom: 1px solid #f6f6f6;
      }
      .temp-btns{
        background-color: #ffffff;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .temp-tip-icon{
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .temp-add-btn{
      flex: 1;
      max-width: calc(25% - 10px);
      min-width: calc(25% - 10px);
      margin: 5px;
      height: 392px;
      background-color: #f0f1f4;
      border: 1px dashed #e3e4e6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-icon-plus{
        font-size: 24px;
      }
      .el-add-text{
        margin-top: 16px;
      }
    }
  }

  .preview-dialog {
    :deep(.el-dialog__headerbtn) {
      top: 10px;
    }
    :deep(.el-dialog__body) {
      padding: 0px 20px 10px 20px;
    }

    .preview-dialog-content {
      width: 375px;
      position: relative;
    }
  }

  .pageList{
    background-color: transparent;
    .pagination-container{
      background-color: transparent;
    }
  }
</style>
