<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="detailedIntroductionSort" label="排序">
        </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="操作">
          <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="" />编辑
              </div>
              <el-popconfirm
                @confirm="confirmDel(scope.row)"
                title="这一段内容确定删除吗？"
                icon-color="red"
              >
                <div class="table-operate red" slot="reference">
                  <img
                    src="../../assets/manageImg/table-delete.png"
                    alt=""
                  />删除
                </div>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      top="5vh"
      :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.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">排序</div>
            <input
              type="number"
              v-model="nowData.detailedIntroductionSort"
              placeholder="请输入排序"
            />
             <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>
        <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">
          确定
        </div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">
          取消
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      addModel: false,
      nowData: {
        detailedIntroductionImage: "",
        detailedIntroductionEnName: "",
        detailedIntroductionEnText: "",
        detailedIntroductionText: "",
        detailedIntroductionName: "",
        detailedIntroductionSort: "",
        detailedIntroductionTextTitle:'',
detailedIntroductionTextEnTitle:'',
        type:4,
      },
      modelName: "添加",
      typeSelList: [],
      TypeSel: "",
      selId: "",
      loading: false,
    };
  },
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit() {
      this.api.website_getowpabyowpidMan().then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.filter(item => item && item.type === 4);
        }
      });
    },
    openModel(item, type) {
      if (type == 0) {
        this.modelName = "添加";
        this.addModel = true;
        this.nowData = {
          detailedIntroductionImage: "",
        detailedIntroductionEnName: "",
        detailedIntroductionEnText: "",
        detailedIntroductionText: "",
        detailedIntroductionName: "",
        detailedIntroductionSort: "",
        detailedIntroductionTextTitle:'',
detailedIntroductionTextEnTitle:'',
        type:4,
        };
      } else {
        this.modelName = "编辑";
        this.nowData = JSON.parse(JSON.stringify(item));
        this.addModel = true;
      }
    },
    changeAddModel() {
        if(this.loading){
           this.$message.error("图片还未上传成功，请耐心等待。");
           return
        }
         if(!this.nowData.detailedIntroductionImage){
           this.$message.error("图片还未上传。");
           return
         }
          this.Addloading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.modelName == "编辑") {
        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.dataInit();
            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.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.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);
    },

    confirmDel(item) {
      var data = { id: item.id.toString() };
      this.api.website_delops(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>