<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius" style="padding: 10px 30px; display: flex;">
      <div style="flex: 1;">
        <h1 class="">{{ title }}</h1>
        <div class="uni-template-container setting-radio" style="padding: 20px;">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="160px"
          >
            <!-- 基本信息 -->
            <el-row>
              <el-col :span="24">
                <div class="title-container">
                  基本信息
                </div>
              </el-col>
            </el-row>
            <el-form-item label="模板名称" prop="templateName">
              <el-input class="w400" placeholder="请输入" v-model="form.templateName" maxlength="64" clearable></el-input>
            </el-form-item>
            <el-form-item label="扫码弹窗" prop="showPop">
              <el-radio v-model="form.showPop" :label="true">显示</el-radio>
              <el-radio v-model="form.showPop" :label="false">不显示</el-radio>
            </el-form-item>
            <el-form-item label="模板类型" prop="templateType">
              <el-radio v-model="form.templateType" :label="1">标准模板</el-radio>
              <el-radio v-model="form.templateType" :label="2">定制模板</el-radio>
            </el-form-item>

            <!-- 标准模板 -->
            <div class="standard-container" v-if="form.templateType == 1">
              <el-form-item label="头部背景图" prop="bgUrl">
                <div class="icon-container" @click="openSelectMaterial('bgUrl')">
                  <img :src="form.bgUrl" alt="扫码记录图标" v-if="form.bgUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.bgUrl"></i>
                </div>
              </el-form-item>
              <el-form-item label="头部字体颜色" prop="fontColor">
                <el-color-picker v-model="form.fontColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="扫码记录" prop="showScanRecord">
                <el-radio v-model="form.showScanRecord" :label="true">显示</el-radio>
                <el-radio v-model="form.showScanRecord" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="扫码记录图标" prop="scanRecordIconUrl">
                <div class="icon-container" @click="openSelectMaterial('scanRecordIconUrl')">
                  <img :src="form.scanRecordIconUrl" alt="扫码记录图标" v-if="form.scanRecordIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.scanRecordIconUrl"></i>
                </div>
              </el-form-item>
              <el-form-item label="切换语言" prop="showChangeLanguage">
                <el-radio v-model="form.showChangeLanguage" :label="true">显示</el-radio>
                <el-radio v-model="form.showChangeLanguage" :label="false">不显示</el-radio>
              </el-form-item>
            </div>

            <!-- 定制模板 -->
            <div class="custom-container" v-if="form.templateType == 2">
              <el-form-item label="背景图" prop="bgUrl">
                <div class="icon-container" @click="openSelectMaterial('bgUrl')">
                  <img :src="form.bgUrl" alt="扫码记录图标" v-if="form.bgUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.bgUrl"></i>
                </div>
              </el-form-item>

              <!-- 节点配置 -->
              <el-row>
                <el-col :span="24">
                  <div class="title-container">
                    节点配置
                  </div>
                </el-col>
              </el-row>
              <span>节点对应小程序显示配置中的环节信息, 节点位置以左上角为起点, 通过XY轴百分比值确定中心点位置; 图标显示尺寸为图标在小程序上显示的大小。</span>
              <div v-for="(item, index) in form.templateItemList" :key="index" class="uni-template-node-container">
                <el-form-item :label='item.name' prop="name">
                  <el-button type="danger" icon="el-icon-delete-solid" class="uni-template-node-icon" @click="removeNode(index)"></el-button>
                </el-form-item>
                <el-form-item label="图标" :prop="`templateItemList[${index}][iconUrl]`" :rules="rules.iconUrl">
                  <div class="icon-container" @click="openSelectMaterial(`templateItemList,${index}`)">
                    <img :src="item.iconUrl" alt="扫码记录图标" v-if="item.iconUrl" style="width: 100px;height: 100px;">
                    <i class="el-icon-plus" v-if="!item.iconUrl"></i>
                  </div>
                </el-form-item>
                <el-form-item label="位置" :required="true" :show-message="false">
                  <div style="display: flex;align-items: center;">
                    <el-form-item label="" :prop="`templateItemList[${index}][x]`" :rules="rules.x">
                      <el-input class="w200" v-model="item.x" @input="handleNumberInput(item.x, 100, 0, 'x', index)">
                        <span slot="prepend">X:</span>
                        <span slot="append">%</span>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" :prop="`templateItemList[${index}][y]`" :rules="rules.y" style="margin-left: 20px;">
                      <el-input class="w200" v-model="item.y" @input="handleNumberInput(item.y, 100, 0, 'y', index)">
                        <span slot="prepend">Y:</span>
                        <span slot="append">%</span>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-form-item>
                <el-form-item label="图标显示尺寸" :required="true" :show-message="false">
                  <div style="display: flex;align-items: center;">
                    <el-form-item label="" :prop="`templateItemList[${index}][width]`" :rules="rules.width">
                      <el-input class="w200" v-model="item.width" @input="handleNumberInput(item.width, 100, 0, 'width', index)">
                        <span slot="prepend">宽:</span>
                        <span slot="append">px</span>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" :prop="`templateItemList[${index}][height]`" :rules="rules.height" style="margin-left: 20px;">
                      <el-input class="w200" v-model="item.height" @input="handleNumberInput(item.height, 100, 0, 'height', index)">
                        <span slot="prepend">高:</span>
                        <span slot="append">px</span>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-form-item>
                <el-form-item label="" v-if="index == form.templateItemList.length - 1">
                  <el-button type="primary" icon="el-icon-plus" class="uni-template-node-icon" @click="addNode"></el-button>
                </el-form-item>
              </div>
              <div class="uni-template-node-container" v-if="form.templateItemList.length == 0">
                <el-button type="primary" icon="el-icon-plus" class="uni-template-node-icon" style="margin: 0px 0px 10px 160px;" @click="addNode"></el-button>
              </div>

              <!-- 图标配置 -->
              <el-row>
                <el-col :span="24">
                  <div class="title-container">
                    图标配置
                  </div>
                </el-col>
              </el-row>
              <el-form-item label="扫码记录" prop="showScanRecord">
                <el-radio v-model="form.showScanRecord" :label="true">显示</el-radio>
                <el-radio v-model="form.showScanRecord" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="扫码记录图标" prop="scanRecordIconUrl" v-if="form.showScanRecord">
                <div class="icon-container" @click="openSelectMaterial('scanRecordIconUrl')">
                  <img :src="form.scanRecordIconUrl" alt="扫码记录图标" v-if="form.scanRecordIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.scanRecordIconUrl"></i>
                </div>
              </el-form-item>

              <el-form-item label="商品详情" prop="showGoodsDetail">
                <el-radio v-model="form.showGoodsDetail" :label="true">显示</el-radio>
                <el-radio v-model="form.showGoodsDetail" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="商品详情图标" prop="goodsDetailIconUrl" v-if="form.showGoodsDetail">
                <div class="icon-container" @click="openSelectMaterial('goodsDetailIconUrl')">
                  <img :src="form.goodsDetailIconUrl" alt="扫码记录图标" v-if="form.goodsDetailIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.goodsDetailIconUrl"></i>
                </div>
              </el-form-item>

              <el-form-item label="AI助手" prop="showAi">
                <el-radio v-model="form.showAi" :label="true">显示</el-radio>
                <el-radio v-model="form.showAi" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="AI助手图标" prop="aiIconUrl" v-if="form.showAi">
                <div class="icon-container" @click="openSelectMaterial('aiIconUrl')">
                  <img :src="form.aiIconUrl" alt="扫码记录图标" v-if="form.aiIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.aiIconUrl"></i>
                </div>
              </el-form-item>

              <el-form-item label="商城" prop="showShop">
                <el-radio v-model="form.showShop" :label="true">显示</el-radio>
                <el-radio v-model="form.showShop" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="商城图标" prop="shopIconUrl" v-if="form.showShop">
                <div class="icon-container" @click="openSelectMaterial('shopIconUrl')">
                  <img :src="form.shopIconUrl" alt="扫码记录图标" v-if="form.shopIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.shopIconUrl"></i>
                </div>
              </el-form-item>

              <el-form-item label="切换语言" prop="showChangeLanguage">
                <el-radio v-model="form.showChangeLanguage" :label="true">显示</el-radio>
                <el-radio v-model="form.showChangeLanguage" :label="false">不显示</el-radio>
              </el-form-item>
              <el-form-item label="切换语言图标" prop="changeLanguageIconUrl" v-if="form.showChangeLanguage">
                <div class="icon-container" @click="openSelectMaterial('changeLanguageIconUrl')">
                  <img :src="form.changeLanguageIconUrl" alt="扫码记录图标" v-if="form.changeLanguageIconUrl" style="width: 100px;height: 100px;">
                  <i class="el-icon-plus" v-if="!form.changeLanguageIconUrl"></i>
                </div>
              </el-form-item>
            </div>

            <el-form-item label="设为默认小程序模板" prop="defaultTemplate">
              <el-switch v-model="form.defaultTemplate" :active-value="true" :inactive-value="false"></el-switch>
            </el-form-item>
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="$router.go(-1)">取 消</el-button>
          </el-form>
        </div>
      </div>

      <div class="uni-template-preview">
        <div class="preview-title">模板预览</div>
        <div class="mobile-border">
          <div class="mobile-outer-border">
            <img src="@/assets/images/mobile-border.png" fit="contain" style="width: 100%; height: 100%;" />
          </div>
          <div class="x-container">
            <div class="x-text">X</div>
            <div class="x-line"></div>
          </div>
          <div class="y-container">
            <div class="y-text">Y</div>
            <div class="y-line"></div>
          </div>
          <div class="mobile-inner-border">
            <appPreview :info="form" :operateDate="operateDate"></appPreview>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择素材弹窗 -->
    <el-dialog
      title="选择素材"
      :visible.sync="selectMaterialVisible"
      width="1300px"
      :before-close="closeSelectMaterial"
      append-to-body
      class="select-material-dialog"
    >
      <div class="select-material-container">
        <div class="left-container">
          <el-input v-model="queryGroupParams.groupName" placeholder="请输入分组名称" @keyup.enter.native="getMaterialGroup()"></el-input>
          <el-menu v-if="materialGroupList.length > 0" default-active="all">
            <el-menu-item index="all" @click="getMaterialList()">全部</el-menu-item>
            <el-menu-item v-for="item in materialGroupList" :key="item.id" :index="String(item.id)" @click="getMaterialList(item.id)">{{ item.groupName }}</el-menu-item>
          </el-menu>
          <div style="margin-top: 20px; text-align: center;" v-else>暂无分组数据</div>
        </div>
        <div class="right-container" id="meterial-list" style="display: relative;">
          <div v-if="materialList.length > 0">
            <el-button type="primary" @click="openUploadImage">上传图片</el-button>
            <div class="material-item-container">
              <el-card
                :body-style="{ padding: '5px' }"
                v-for="(item, index) in materialList"
                :key="index" class="material-item"
                :class="{ 'item-active': item.selected }"
                @click.native="clickMaterialItem(index)"
              >
                <img :src="item.materialUrl" fit="contain" style="width: 100%; height: 160px;">
                <div style="padding: 5px 14px;">
                  <el-checkbox v-model="item.selected">{{ item.materialName }}</el-checkbox>
                </div>
              </el-card>
            </div>
            <!-- 分页组件 -->
            <pagination
              v-show="materialTotal > 0"
              :total="materialTotal"
              :page.sync="queryParams.pageNo"
              :limit.sync="queryParams.pageSize"
              @pagination="getMaterialList"
            />
          </div>
          <div v-else>
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeSelectMaterial">取消</el-button>
        <el-button type="primary" @click="submitselectMaterial">确定</el-button>
      </div>
    </el-dialog>

    <!-- 选择素材弹窗 -->
    <el-dialog
      title="上传图片"
      :visible.sync="uploadImageVisible"
      width="640px"
      :before-close="closeUploadImage"
      append-to-body
      class="select-material-dialog"
    >
      <el-form ref="uploadForm" :model="uploadForm" :rules="uploadRules" label-width="100px">
        <el-form-item label="上传至分组" prop="groupId">
          <el-select v-model="uploadForm.groupId" placeholder="请选择分组">
            <el-option v-for="item in materialGroupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="上传图片"
          prop="materialFileList"
        >
          <imageUpload
            v-model="uploadForm.materialFileList"
            :limit="10"
            :fileSize="10"
            :fileType="['png', 'jpg', 'jpeg', 'gif', 'svg']"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUploadImage">取消</el-button>
        <el-button type="primary" @click="submitUploadImage" v-loading.lock="uploadImageLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Loading } from 'element-ui';
  import appPreview from '@/components/Customer/appPreview';
  import { createStandardTemplate, createCustomizeTemplate, updateStandardTemplate, updateCustomizeTemplate, getUniTemplate } from '@/api/configure/uniTemplate';
  import {
    getMaterialManagementPage,
    getMaterialGroupList,
    createMaterialManagement,
  } from "@/api/configure/materialManagement";
  import { formatToPositiveNumber } from "@/utils/number";
  import ImageUpload from "@/components/ImageUpload2";

  export default {
    components: {
      appPreview,
      ImageUpload
    },
    data() {
      return {
        // 展示内容（农事作业等）
        operateDate: {},
        form: {},
        rules: {
          templateName: [{ required: true, message: "模板名称不能为空", trigger: "change" }],
          showPop: [{ required: true, message: "扫码弹窗显示状态不能为空", trigger: "change" }],
          templateType: [{ required: true, message: "模板类型不能为空", trigger: "change" }],
          bgUrl: [{ required: true, message: "背景图不能为空", trigger: "change" }],
          fontColor: [{ required: true, message: "字体颜色不能为空", trigger: "change" }],
          showScanRecord: [{ required: true, message: "扫码记录显示状态不能为空", trigger: "change" }],
          scanRecordIconUrl: [{ required: true, message: "扫码记录图标不能为空", trigger: "change" }],
          showGoodsDetail: [{ required: true, message: "商品详情显示状态不能为空", trigger: "change" }],
          goodsDetailIconUrl: [{ required: true, message: "商品详情图标不能为空", trigger: "change" }],
          showAi: [{ required: true, message: "AI助手显示状态不能为空", trigger: "change" }],
          aiIconUrl: [{ required: true, message: "AI助手图标不能为空", trigger: "change" }],
          showShop: [{ required: true, message: "商城显示状态不能为空", trigger: "change" }],
          shopIconUrl: [{ required: true, message: "商城图标不能为空", trigger: "change" }],
          showChangeLanguage: [{ required: true, message: "切换语言显示状态不能为空", trigger: "change" }],
          changeLanguageIconUrl: [{ required: true, message: "切换语言图标不能为空", trigger: "change" }],
          defaultTemplate: [{ required: true, message: "是否设为默认小程序模板不能为空", trigger: "change" }],
          iconUrl: [{ required: true, message: "图标不能为空", trigger: "change" }],
          x: [{ required: true, message: "X轴百分比值不能为空", trigger: "change" }],
          y: [{ required: true, message: "Y轴百分比值不能为空", trigger: "change" }],
          width: [{ required: true, message: "图标显示宽度不能为空", trigger: "change" }],
          height: [{ required: true, message: "图标显示高度不能为空", trigger: "change" }],
        },
        title: '新增模板',
        // 所属商户列表
        businessNameList: [],
        isDisabled: false,

        // 选择素材弹窗相关参数
        selectMaterialVisible: false,
        selectMaterialType: '',
        selectedMaterialUrl: '',
        loadingMaterial: null,

        queryParams: {
          pageNo: 1,
          pageSize: 10,
        },
        queryGroupParams: {
          groupName: null,
        },
        materialList: [],
        materialTotal: 0,
        materialGroupList: [],

        // 上传图片相关参数
        uploadImageVisible: false,
        uploadImageLoading: false,
        uploadForm: {
          groupId: undefined,
          materialFileList: [],
        },
        uploadRules: {
          groupId: [{ required: true, message: "请选择分组", trigger: "change" }],
          materialFileList: [{ required: true, message: "请上传图片", trigger: "change" }],
        },
      }
    },
    created() {
      this.reset();
      let id = this.$route.query.id;
      if (id) {
        this.title = "修改模板";
        this.isDisabled = true;
        getUniTemplate(id).then(({ data })=>{
          if(data){
            this.form = {
              ...data,
              templateItemList: data.templateItemList.map((item, index) => {
                return {
                  ...item,
                  name: '节点' + (index + 1),
                };
              }),
            }
          }
        });
      }
    },
    methods:{
      reset() {
        this.form = {
          id: undefined,
          templateName: '',
          showPop: true,
          templateType: 1,
          bgUrl: undefined,
          fontColor: '#ffffff',
          templateItemList: [],
          showScanRecord: true,
          scanRecordIconUrl: undefined,
          showGoodsDetail: true,
          goodsDetailIconUrl: undefined,
          showAi: true,
          aiIconUrl: undefined,
          showShop: true,
          shopIconUrl: undefined,
          showChangeLanguage: true,
          changeLanguageIconUrl: undefined,
          defaultTemplate: false,
        };
        this.resetForm("form");
      },
      submitForm() {
        this.$refs["form"].validate(async valid => {
          if (!valid) {
            return;
          }

          if(this.form.id) {
            let rest = {};
            if (this.form.templateType == 1) {
              rest = await updateStandardTemplate(this.form);
            } else {
              rest = await updateCustomizeTemplate(this.form);
            }
            if(rest.data) {
              this.$message.success("修改成功");
              this.$router.go(-1);
            }
            return false;
          }
          let res = {};
          if (this.form.templateType == 1) {
            res = await createStandardTemplate(this.form);
          } else {
            res = await createCustomizeTemplate(this.form);
          }
          if (res.data) {
            this.$message.success("创建成功");
            this.$router.go(-1);
          }
        });
      },
      // 添加节点
      addNode() {
        this.form.templateItemList.push({
          name: '节点' + (this.form.templateItemList.length + 1),
          iconUrl: '',
          x: 0,
          y: 0,
          width: 0,
          height: 0,
        });
      },
      // 删除节点
      removeNode(index) {
        this.form.templateItemList.splice(index, 1);
        this.form.templateItemList.forEach((item, index) => {
          item.name = '节点' + (index + 1);
        });
      },
      // 输入框数字限制
      handleNumberInput(value, max, min, type, index) {
        if (value == "" || value == undefined || (value.indexOf("-") == 0 && Number(value) == 0)) {
          return;
        }

        value = `${value}`.replace(/[^\d.-]/g, "");
        let newValue = formatToPositiveNumber(value, 2);
        const signs =
          value == "-" ||
          (Number.isNaN(Number(value)) && value.indexOf("-") == 0) ||
          Number(value) < 0
            ? "-"
            : "";
        if (Number(`${signs}${newValue}`) > max) {
          this.form.templateItemList[index][type] = max;
        } else if (Number(`${signs}${newValue}`) < min) {
          this.form.templateItemList[index][type] = min;
        } else {
          this.form.templateItemList[index][type] = `${signs}${newValue}`;
        }
      },
      // 素材弹窗相关
      openSelectMaterial(type) {
        this.selectMaterialVisible = true;
        this.selectMaterialType = type;

        this.$nextTick(() => {
          this.loadingMaterial = Loading.service({ text: '加载中...', target: '.right-container' });
          getMaterialGroupList().then(({ data }) => {
            this.materialGroupList = data;
            if (this.materialGroupList.length > 0) {
              getMaterialManagementPage(this.queryParams).then(({ data: { list, total } }) => {
                this.materialList = list.map((item) => {
                  if (this.selectMaterialType.indexOf("templateItemList") > -1) {
                    item.selected = item.materialUrl === this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl;
                  } else {
                    item.selected = item.materialUrl === this.form[this.selectMaterialType];
                  }
                  return item;
                });
                this.materialTotal = total;
                this.loadingMaterial.close();
              });
            } else {
              this.loadingMaterial.close();
            }
          }).catch(() => {
            this.loadingMaterial.close();
          });
        });
      },
      getMaterialGroup() {
        getMaterialGroupList(this.queryGroupParams).then(({ data }) => {
          this.materialGroupList = data;
        });
      },
      getMaterialList(id) {
        this.queryParams.groupId = id;
        this.loadingMaterial = Loading.service({ text: '加载中...', target: '.right-container' });
        getMaterialManagementPage(this.queryParams).then(( { data: { list, total } } ) => {
          this.materialList = list.map((item) => {
            if (this.selectMaterialType.indexOf("templateItemList") > -1) {
              item.selected = item.materialUrl === this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl;
            } else {
              item.selected = item.materialUrl === this.form[this.selectMaterialType];
            }
            return item;
          });
          this.materialTotal = total;
          this.loadingMaterial.close();
        });
      },
      closeSelectMaterial() {
        this.selectMaterialVisible = false;
        this.materialList = [];
        this.materialTotal = 0;

      },
      // 确认选择素材
      submitselectMaterial() {
        if (this.selectMaterialType.indexOf("templateItemList") > -1) {
          this.form.templateItemList[this.selectMaterialType.split(",")[1]].iconUrl = this.selectedMaterialUrl;
        } else {
          this.form[this.selectMaterialType] = this.selectedMaterialUrl;
        }
        this.selectMaterialVisible = false;
      },
      resetMaterialForm() {
        this.selectedMaterialUrl = '';
      },
      // 确认选择素材
      clickMaterialItem(index) {
        const item = this.materialList[index];
        if (!item.selected) {
          this.selectedMaterialUrl = item.materialUrl;
        } else {
          this.selectedMaterialUrl = '';
        }
        this.materialList = this.materialList.map((item, i) => {
          if (i === index && !item.selected) {
            item.selected = true;
          } else {
            item.selected = false;
          }
          return item;
        });
      },
      // 打开上传图片弹窗
      openUploadImage() {
        this.uploadImageVisible = true;
      },
      closeUploadImage() {
        this.uploadImageVisible = false;
        this.uploadForm = {
          groupId: undefined,
          materialFileList: [],
        };
        this.resetForm("uploadForm");
      },
      // 上传图片
      submitUploadImage() {
        this.$refs["uploadForm"].validate((valid) => {
          if (!valid) {
            return;
          }

          const params = this.uploadForm.materialFileList.map((item) => ({
            groupId: this.uploadForm.groupId,
            materialUrl: item.url,
            materialName: item.name,
          }));
          createMaterialManagement(params).then(() => {
            this.$message.success("上传图片成功");
            this.closeUploadImage();
            this.getMaterialList(this.queryParams.groupId);
          });
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .uni-template-container {
    .title-container {
      padding-left: 10px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #303133;
      border-left: 4px solid rgb(24 144 255);
    }
    .uni-template-node-container {
      margin-top: 20px;
      border-bottom: 1px dashed #e8e8e8;
      .uni-template-node-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        padding: 0px;
      }
    }

    .el-form-item {
      margin-bottom: 12px;
    }

    .icon-container {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      margin-bottom: 10px;
      background-color: #fbfdff;
      cursor: pointer;
      overflow: hidden;
      i {
        font-size: 36px;
        color: #909399;
      }
    }

    .icon-container:hover {
      border-color: #1890ff;
    }
  }

  .select-material-dialog {
    .select-material-container {
      display: flex;
      flex-direction: row;
    }

    .left-container {
      width: 210px;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0px 10px;
      border-right: 1px solid #e8e8e8;
      min-height: 400px;

      :deep(.el-menu) {
        border-right: none;
        .el-menu-item {
          height: 36px;
          line-height: 36px;
        }
      }
    }

    .right-container {
      padding-left: 20px;
      flex: 1;

      .material-item-container {
        margin-top: 20px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 10px;
        width: 100%;
        min-height: 430px;
      }
      .material-item {
        width: 185px;
        height: 200px;
        text-align: left;
        margin-right: 15px;
        margin-bottom: 10px;
      }
      .material-item:hover {
        cursor: pointer;
        border: 1px solid #1890ff;
      }
      .item-active {
        border: 1px solid #1890ff;
      }
    }

    :deep(.el-dialog__body) {
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
    }
  }

  .uni-template-preview {
    z-index: 100;
    width: 500px;
    height: 100%;

    .preview-title {
      padding: 10px;
      font-size: 24px;
      font-weight: 700;
      color: #303133;
    }

    .mobile-border {
      width: 428px;
      height: 856px;
      position: relative;
      // background: url("~@/assets/images/mobile-border.png") no-repeat center center;
      // background-size: 100% 100%;
    }

    .mobile-outer-border {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 20px;
      left: 20px;
      // z-index: 100;
    }

    .mobile-inner-border {
      width: 375px;
      height: 815px;
      position: relative;
      top: 40px;
      left: 45px;
      overflow: hidden;
      // overflow-y: scroll;
      border-radius: 50px;
    }

    .x-container {
      position: absolute;
      top: 0px;
      left: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .x-text {
        font-size: 18px;
        color: red;
        z-index: 101;
      }

      .x-line {
        width: 1px;
        height: 950px;
        background-color: rgb(182, 182, 182);
        z-index: 101;
      }
    }
    .y-container {
      position: absolute;
      top: 28px;
      left: 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .y-text {
        font-size: 18px;
        color: red;
        z-index: 101;
      }

      .y-line {
        width: 450px;
        height: 1px;
        background-color: rgb(182, 182, 182);
        z-index: 101;
      }
    }

  }
</style>
