<template>
  <div class="videoManage manage-page">
    <div class="flex-view flex-title">
      <div class="table-title">官网产品列表管理</div>
      <div class="table-title-btn blue" @click="openModel1({}, 0)">
        <img src="../../assets/manageImg/add-btn.png" alt="" />{{$t('text.add')}}
      </div>
    </div>
    <div class="table-view">
      <el-table
        :data="tableData1"
        :row-class-name="tableRowClassName"
        height="320"
        style="width: 100%"
      >
        <el-table-column prop="productDisplaySort" :label="$t('text.sortOrder')">
        </el-table-column>
        <el-table-column prop="productDisplayName" label="产品列表名称">
        </el-table-column>
        <el-table-column prop="productDisplayEnName" label="产品列表英文名称">
        </el-table-column>
        <el-table-column :label="$t('text.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel1(scope.row, 1)">
                <img src="../../assets/manageImg/table-edit.png" alt="" />{{$t('text.edit')}}
              </div>
              <el-popconfirm
                @confirm="confirmDel1(scope.row)"
                :title="$t('text.deleteContent')"
                icon-color="red"
              >
                <div class="table-operate red" slot="reference">
                  <img
                    src="../../assets/manageImg/table-delete.png"
                    alt=""
                  />{{$t('text.delete')}}
                </div>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex-view"></div>
    <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="" />{{$t('text.add')}}
      </div>
    </div>
    <div class="table-view">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        height="320"
        style="width: 100%"
      >
        <el-table-column prop="detailedIntroductionSort" :label="$t('text.sortOrder')">
        </el-table-column>
        <el-table-column prop="detailedIntroductionName" label="产品名字">
        </el-table-column>
        <el-table-column prop="detailedIntroductionEnName" label="产品英文名字">
        </el-table-column>
        <el-table-column :label="$t('text.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('text.edit')}}
              </div>
              <el-popconfirm
                @confirm="confirmDel(scope.row)"
                :title="$t('text.deleteContent')"
                icon-color="red"
              >
                <div class="table-operate red" slot="reference">
                  <img
                    src="../../assets/manageImg/table-delete.png"
                    alt=""
                  />{{$t('text.delete')}}
                </div>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 产品列表弹窗 -->
       <el-dialog
      :close-on-click-modal="false"
      title="提示"
      top="10vh"
      :visible.sync="addModel1"
      width="700px"
      class="vrcode-model manage-model"
      :append-to-body="true"
    >
      <div class="vrcode-model-title">
        {{ modelName1 }}
      </div>
      <div class="vrcode-content" v-if="nowData1">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">产品列表名字</div>
            <input
              type="text"
              v-model="nowData1.productDisplayName"
              placeholder="请输入产品列表名字"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">产品列表英文名字</div>
            <input
              type="text"
              v-model="nowData1.productDisplayEnName"
              placeholder="请输入产品列表英文名字"
            />
          </div>

          <div class="manage-input">
            <div class="input-title">{{$t('text.sortOrder')}}</div>
            <input
              type="number"
              v-model="nowData1.productDisplaySort"
              :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-img1">
              <img
                v-show="nowData1.productDisplayImages"
                class=""
                :src="nowData1.productDisplayImages"
                alt="产品列表图片"
              />
              <img
                class="upload-img"
                v-show="!nowData1.productDisplayImages"
                src="../../assets/img/upload-img.png"
                alt=""
              />
            </label>
            <input
              ref="fileInput1"
              type="file"
              :multiple="false"
              id="sel-img1"
              accept="image/*"
              @change="handleImageChange1($event, 0)"
            />
          </div>
        </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel1">
          {{$t('index.confirm')}}
        </div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">
          {{$t('index.cancel')}}
        </div>
      </span>
    </el-dialog>
    <!-- 产品详情弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      top="10vh"
      :visible.sync="addModel"
      width="1050px"
      class="vrcode-model manage-model"
      :append-to-body="true"
    >
      <div class="vrcode-model-title">
        {{ modelName }}
      </div>
      <div class="vrcode-content grid-3" v-if="nowData">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">所属产品列表</div>
           <el-select v-model="nowData.productId" placeholder="请选择">
    <el-option
      v-for="item in tableData1"
      :key="item.id"
      :label="item.productDisplayName"
      :value="item.id">
    </el-option>
  </el-select>
          </div>
          <div class="manage-input">
            <div class="input-title">产品名称</div>
            <input
              type="text"
              v-model="nowData.detailedIntroductionName"
              placeholder="请输入产品名称"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">产品英文名称</div>
            <input
              type="text"
              v-model="nowData.detailedIntroductionEnName"
              placeholder="请输入产品英文名称"
            />
          </div>

          <div class="manage-input">
            <div class="input-title">{{$t('text.sortOrder')}}</div>
            <input
              type="number"
              v-model="nowData.detailedIntroductionSort"
              :placeholder="$t('placeholder.sortOrderPlaceholder')"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">产品详情小标题</div>
            <input
              type="text"
              v-model="nowData.detailedIntroductionTextTitle"
              placeholder="请输入产品详情小标题"
            />
          </div>
          <div class="manage-input">
            <div class="input-title">产品详情小标题英文</div>
            <input
              type="text"
              v-model="nowData.detailedIntroductionTextEnTitle"
              placeholder="请输入产品详情小标题英文"
            />
          </div>
       
        </div>
        <div class="manage-right">
           <div class="manage-textarea">
            <div class="input-title">产品中文内容(以回车键换行)</div>
            <textarea
              v-model="nowData.detailedIntroductionTextContent"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </div>
          <div class="manage-textarea">
            <div class="input-title">产品英文内容(以回车键换行)</div>
            <textarea
              v-model="nowData.detailedIntroductionTextEnContent"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </div>
               <div class="manage-textarea">
            <div class="input-title">产品中文讲解(以回车键换行)</div>
            <textarea
              v-model="nowData.detailedIntroductionText"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </div>
          <div class="manage-textarea">
            <div class="input-title">产品英文讲解(以回车键换行)</div>
            <textarea
              v-model="nowData.detailedIntroductionEnText"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </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.detailedIntroductionImage"
                class=""
                :src="nowData.detailedIntroductionImage"
                alt="案例图片"
              />
              <img
                class="upload-img"
                v-show="!nowData.detailedIntroductionImage"
                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 {
      // 产品列表
      tableData1: [],
      addModel1: false,
      nowData1: {
        productDisplayEnName: "",
        productDisplayImages: "",
        productDisplayName: "",
        productDisplaySort: "",
      },
      modelName1: this.$t('text.add'),
      typeSelList: [],
      TypeSel: "",
      selId: "",

      // 产品信息
      tableData: [],
      addModel: false,
      nowData: {
         detailedIntroductionEnName: "",
detailedIntroductionEnText: '',
detailedIntroductionImage: '',
detailedIntroductionName: "",
detailedIntroductionSort:'',
detailedIntroductionText: '',
detailedIntroductionTextContent: '',
detailedIntroductionTextEnContent: '',
detailedIntroductionTextEnTitle:'',
detailedIntroductionTextTitle:'',
productId: "",
          type: 1,
      },
      modelName: this.$t('text.add'),
      selId: "",

      loading: false,
    };
  },
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit() {
      this.getProduct()
      this.getProductList()
    },
    getProduct(){
       this.api.website_getowpabyowpidMan().then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.filter(
            (item) => item && item.type === 1
          );
        }
      });
    },
    getProductList(){
       this.api.website_getowpManagement().then((res) => {
        if (res.data.code == 200) {
          this.tableData1 = res.data.data;
        }
      });
    },
    // 产品详情
    openModel(item, type) {
      if (type == 0) {
        this.modelName = this.$t('text.add');
        this.addModel = true;
        this.nowData = {
     detailedIntroductionEnName: "",
detailedIntroductionEnText: '',
detailedIntroductionImage: '',
detailedIntroductionName: "",
detailedIntroductionSort:'',
detailedIntroductionText: '',
detailedIntroductionTextContent: '',
detailedIntroductionTextEnContent: '',
detailedIntroductionTextEnTitle:'',
detailedIntroductionTextTitle:'',
productId: "",
          type: 1,
        };
      } else {
        this.modelName = this.$t('text.edit');
        this.nowData = JSON.parse(JSON.stringify(item));
        this.addModel = true;
      }
    },
    // 产品列表
      openModel1(item, type) {
      if (type == 0) {
        this.modelName1 = this.$t('text.add');
        this.addModel1 = true;
        this.nowData1 = {
           productDisplayEnName: "",
        productDisplayImages: "",
        productDisplayName: "",
        productDisplaySort: "",
        };
      } else {
        this.modelName1 = this.$t('text.edit');
        this.nowData1 = JSON.parse(JSON.stringify(item));
        this.addModel1 = true;
      }
    },
    // 产品详情
    changeAddModel() {
      if(this.loading){
           this.$message.error("图片还未上传成功，请耐心等待。");
           return
        }
   if(!this.nowData.detailedIntroductionImage){
           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('text.edit')) {
        var data = { ...this.nowData, id: this.nowData.id.toString() };
        this.api.website_updateops(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
             this.getProduct()
            this.addModel = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false;
          }
        });
      } else {
        var data = { ...this.nowData };
        this.api.website_addops(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
             this.getProduct()
            this.addModel = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false;
          }
        });
      }
    },
    // 产品列表
    changeAddModel1() {
       if(this.loading){
           this.$message.error("图片还未上传成功，请耐心等待。");
           return
        }
   if(!this.nowData1.detailedIntroductionImage){
           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.modelName1 == this.$t('text.edit')) {
        var data = { ...this.nowData1, id: this.nowData1.id.toString() };
        this.api.website_updateowp(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
           this.getProductList()
            this.addModel1 = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel1 = false;
          }
        });
      } else {
        var data = { ...this.nowData1 };
        this.api.website_addowp(data).then((res) => {
          this.Addloading.close();
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
           this.getProductList()
            this.addModel1 = false;
          } else {
            this.$message.error(res.data.msg);
            this.addModel1 = 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.detailedIntroductionImage = 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);
    },
    // 产品列表
        handleImageChange1(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.fileInput1.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.nowData1.productDisplayImages = res.data.msg;
            this.$refs.fileInput1.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_delops(data).then((res) => {
        if (res.data.code == 200) {
           this.getProduct()
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 产品列表
     confirmDel1(item) {
      var data = { id: item.id.toString() };
      this.api.website_delowp(data).then((res) => {
        if (res.data.code == 200) {
        this.getProductList()
          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>