<template>
  <div class="videoManage manage-page">
    <div class="flex-view flex-title">
      <div class="table-title">官网顶部轮播图</div>
      <div class="table-title-btn blue" @click="openModel({}, 0)">
        <img src="../../assets/manageImg/add-btn.png" alt="" />添加
      </div>
    </div>
    <div class="table-view">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        height="620"
        style="width: 100%"
      >
        <el-table-column prop="homepageSort" :label="$t('nameText.sortOrder')">
        </el-table-column>
         <el-table-column prop="homepageName" label="轮播图名字">
        </el-table-column>
           <el-table-column prop="homepageEnname" label="轮播图英文名字">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, 1)">
                <img src="../../assets/manageImg/table-edit.png" alt="" />{{$t('nameText.edit')}}
              </div>
              <el-popconfirm
                @confirm="confirmDel(scope.row)"
                :title="$t('nameText.deleteContent')"
                icon-color="red"
              >
                <div class="table-operate red" slot="reference">
                  <img
                    src="../../assets/manageImg/table-delete.png"
                    alt=""
                  />{{$t('nameText.delete')}}
                </div>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      top="10vh"
      :visible.sync="addModel"
      width="700px"
      class="vrcode-model manage-model"
      :append-to-body="true"
    >
      <div class="vrcode-model-title">
        {{ modelName }}
      </div>
      <div class="vrcode-content" v-if="nowData">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">轮播图名字</div>
            <input
              type="text"
              v-model="nowData.homepageName"
              placeholder="请输入轮播图名字"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">轮播图文字字号大小</div>
            <input
              type="text"
              v-model="nowData.homepageNameSize"
              placeholder="请输入轮播图文字字号大小"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">轮播图英文名字</div>
            <input
              type="text"
              v-model="nowData.homepageEnname"
              placeholder="请输入轮播图英文名字"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">轮播图英文文字字号大小</div>
            <input
              type="text"
              v-model="nowData.homepageEnnameSize"
              placeholder="请输入轮播图英文文字字号大小"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">轮播图间隔时间(毫秒)</div>
            <input
              type="number"
              v-model="nowData.homepageTime"
              placeholder="请输入轮播图间隔时间(默认3000毫秒)"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.sortOrder')}}</div>
            <input
              type="number"
              v-model="nowData.homepageSort"
              :placeholder="$t('placeholder.sortOrderPlaceholder')"
            />
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-input">
            <div class="input-title">轮播图图片(图片大小不能超过2MB)</div>
          </div>
          <div class="manage-img" v-loading="loading">
            <label for="sel-img">
              <img
                v-show="nowData.homepaeImage"
                class=""
                :src="nowData.homepaeImage"
                alt="轮播图图片"
              />
              <img
                class="upload-img"
                v-show="!nowData.homepaeImage"
                src="../../assets/img/upload-img.png"
                alt=""
              />
            </label>
            <input
              ref="fileInput"
              type="file"
              :multiple="false"
              id="sel-img"
              accept="image/*"
              @change="handleImageChange($event, 0)"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">
          {{$t('index.confirm')}}
        </div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">
          {{$t('index.cancel')}}
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      addModel: false,
      nowData: {
        homepaeImage: "",
        homepageEnname: "",
        homepageEnnameSize: 0,
        homepageName: "",
        homepageNameSize: 0,
        homepageSort: "",
        homepageTime: 3000,
      },
      modelName: "添加",
      typeSelList: [],
      TypeSel: "",
      selId: "",
      loading: false,
    };
  },
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit() {
      this.api.website_getows().then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    openModel(item, type) {
      if (type == 0) {
        this.modelName = "添加";
        this.addModel = true;
        this.nowData = {
          homepaeImage: "",
          homepageEnname: "",
          homepageEnnameSize: 0,
          homepageName: "",
          homepageNameSize: 0,
          homepageSort: "",
          homepageTime: 3000,
        };
      } else {
        this.modelName = this.$t('nameText.edit');
        this.nowData = JSON.parse(JSON.stringify(item));
        this.addModel = true;
      }
    },
    changeAddModel() {
        if(this.loading){
           this.$message.error("图片还未上传成功，请耐心等待。");
           return
        }
       if(!this.nowData.homepaeImage){
           this.$message.error("图片还未上传。");
           return
         }
         this.Addloading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.modelName == this.$t('nameText.edit')) {
         var data = { ...this.nowData,id:this.nowData.id.toString() };
        this.api.website_updateows(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.dataInit();
            this.addModel = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false;
          }
        });
      } else {
         var data = { ...this.nowData};
       
        this.api.website_addows(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.dataInit();
            this.addModel = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false;
          }
        });
      }
    },
    handleImageChange(event, type) {
      this.loading = true;
      if (event.target.files.length === 0) {
        // 用户点击了取消
        this.loading = false;
        return;
      }
      const file = event.target.files[0];

      const reader = new FileReader();
      const maxSize = 2 * 1024 * 1024; // 2MB in bytes
      if (file.size > maxSize) {
        this.$message.error("图片大小不能超过2MB");
        this.$refs.fileInput.value = "";
         this.loading = false;
        return;
      }

      reader.onload = (e) => {
        const imageData = e.target.result;
        const convertedFile = new File([imageData], file.name, {
          type: file.type,
        });
        // 处理转换后的文件...

        var data = { file: convertedFile };
        this.api.websiteUploadImage(data).then((res) => {
          this.loading = false;
          if (res.data.code == 200) {
            this.nowData.homepaeImage = res.data.msg;
            this.$refs.fileInput.value = "";
          } else {
             this.$message.error(res.data.msg);
          }
        }).catch((err) => {
          this.loading = false;
          this.$message.error("插入图片失败");
        });
      };
      reader.readAsArrayBuffer(file);
    },

    confirmDel(item) {
      var data = { id: item.id.toString() };
      this.api.website_delows(data).then((res) => {
        if (res.data.code == 200) {
          this.dataInit();
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style lang="scss"></style>