<!--
 * @Author: your name
 * @Date: 2020-12-17 16:06:03
 * @LastEditTime: 2020-12-18 13:15:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\transactionProtection\index.vue
-->
<template>
  <div id="TransactionProtection">
    <!-- 操作表格栏 -->
    <div class="operators">
      <div class="searchList">
        <div class="theme">
          <span>保障标题</span>
          <el-col :span="16">
            <el-input
              v-model="currentTheme"
              placeholder="请输入保障标题"
              size="100px"
            ></el-input>
          </el-col>
        </div>

        <div class="controls">
          <div
            class="item"
            v-for="(item, index) in operatorControls"
            :key="index"
            @click.stop="clickOperator(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="addCate">
        <div class="add" @click.stop="addProtect">新增保障</div>
      </div>
    </div>
    <!-- 添加与修改弹框 -->
    <el-dialog
      :title="managerTitle"
      :visible.sync="managerVisible"
      append-to-body
    >
      <div id="manager">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="排序" prop="rank">
            <el-col :span="12">
              <el-input
                type="number"
                v-model="form.rank"
                placeholder="请输入排序号"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-col :span="12">
              <el-input
                v-model="form.title"
                placeholder="请输入标题"
              ></el-input>
            </el-col>
            <el-col :span="6">
              <div class="colorPicker">
                <colorPicker
                  v-model="form.color"
                  @change="handleChangeColor"
                ></colorPicker>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload
              class="avatar-uploader"
              :action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
              :show-file-list="false"
              :on-success="handleIconSuccess"
            >
              <img
                v-if="form.icon"
                :src="form.icon"
                style="width: 100px; height: 100px"
                class="avatar"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="width: 100px; height: 100px; line-height: 100px"
              ></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-col :span="24">
              <div
                class="content"
                v-for="(item, index) in form.detail"
                :key="index"
              >
                <el-input
                  v-model="item.content"
                  placeholder="请输入内容"
                ></el-input>
                <div class="operators">
                  <i
                    class="el-icon-delete"
                    v-show="form.detail.length > 1"
                    @click.stop="removeContent(index)"
                  ></i>
                  <div
                    class="addContent"
                    v-show="index == form.detail.length - 1"
                    @click.stop="addContent"
                  >
                    <i class="el-icon-plus"></i>添加内容
                  </div>
                </div>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="closeManager">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="保障标题"
          prop="title"
          align="center"
        ></el-table-column>
        <el-table-column label="保障内容" align="center">
          <template slot-scope="scope">
            <div v-html="scope.row.content">
              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="发布时间"
          prop="updTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          prop="rank"
          align="center"
        ></el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status == 1 ? "上架" : "下架" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <span>
              <div class="operators">
                <div class="edit" @click.stop="editProtection(scope.row)">
                  编辑
                </div>
                <div
                  class="offshelf"
                  v-if="scope.row.status == 1"
                  @click.stop="changeStatus(scope.row)"
                >
                  下架
                </div>
                <div
                  class="upshelf"
                  v-else
                  @click.stop="changeStatus(scope.row)"
                >
                  上架
                </div>
                <div class="delete" @click.stop="delInfo(scope.row)">删除</div>
              </div>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="changeHandleSize"
        @current-change="changeHandleCurrent"
        :current-page.sync="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  addUpdateProtection,
  getListProtections,
} from "api/website/industryApplication/index";
import elementVue from "../../../admin/menu/components/element.vue";
export default {
  name: "TransactionProtection",
  components: {},
  data() {
    return {
      BASE_API: process.env.BASE_API,
      currentTheme: "",
      // 功能按钮
      operatorControls: [
        {
          name: "搜索",
        },
        {
          name: "清空搜索",
        },
      ],
      managerTitle: "交易保障", // 修改交易保障
      managerVisible: false,
      rules: {
        rank: [{ required: true, message: "请输入排序号", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      currentEidtInfo: "",
      form: {
        rank: "",
        icon: undefined,
        title: "",
        detail: [
          {
            content: "",
          },
        ],
        color: "#000000",
      },
      tableDataCache: [],
      tableData: [
        // {
        //   index: 1,
        //   title: "保障标题",
        //   detail: "保障内容",
        //   updTime: "发布时间",
        //   rank: 100,
        //   status: 1,
        // },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 0,
      },
    };
  },
  watch: {
    managerVisible(newVal) {
      if (!newVal) {
        this.form.rank = "";
        this.form.title = "";
        this.form.detail = [{ content: "" }];
        this.form.color = "";
        this.form.icon = undefined;
      }
    },
  },
  mounted() {
    this.pullListProtections();
  },
  methods: {
    handleIconSuccess(res) {
      this.form.icon = res.data;
    },
    pullListProtections() {
      getListProtections({
        page: this.pagination.currentPage,
        limit: this.pagination.pageSize,
      }).then((res) => {
        if (res.status == 200) {
          console.log("获取的保障分页数据为=>", res);
          this.tableDataCache = [];
          this.pagination.total = res.data.totalCount;
          res.data.data.forEach((element) => {
            this.tableDataCache.push(element);
          });
          this.screenListProtections();
        }
      });
    },
    screenListProtections() {
      this.tableData = [];
      let index = 0;
      this.tableDataCache.forEach((element) => {
        this.tableData.push({
          content: this.transDetailToContent(element.detail),
          index:
            (this.pagination.currentPage - 1) * this.pagination.pageSize +
            ++index,
          id: element.id,
          title: element.title,
          crtTime: element.crtTime,
          updTime: element.updTime,
          detail: element.detail,
          isDel: element.isDel,
          rank: element.rank,
          status: element.status,
          type: element.type,
          icon: element.icon,
          color: !!element.color ? element.color : "#000000",
        });
      });
      if (this.currentTheme != "") {
        this.tableData = this.tableData.filter((element) => {
          //正则表达式
          let reg = new RegExp(this.currentTheme);
          return element.title.match(reg);
        });
      }
    },
    changeStatus(info) {
      let message = "";
      if (info.status == 1) {
        info.status = 2;
        message = "下架成功!!!";
      } else {
        info.status = 1;
        message = "上架成功!!!";
      }
      addUpdateProtection({
        type: info.type,
        title: info.title,
        detail: info.detail,
        status: info.status,
        isDel: info.isDel,
        color: info.color,
        icon: info.icon,
        rank: info.rank,
        id: info.id,
      }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: message,
            type: "success",
          });
          this.pullListProtections();
        } else {
          this.$message.error("操作失败,请稍后重试!!!");
        }
      });
    },
    delInfo(info) {
      this.$confirm("确定继续执行该操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        addUpdateProtection({
          type: info.type,
          title: info.title,
          detail: info.detail,
          status: info.status,
          isDel: 1,
          icon: info.icon,
          color: info.color,
          rank: info.rank,
          id: info.id,
        }).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "删除成功!!!",
              type: "success",
            });
            this.pullListProtections();
          } else {
            this.$message.error("操作失败,请稍后重试!!!");
          }
        });
      });
    },
    changeHandleSize(val) {
      // console.log(`每页 ${val} 条`);
      this.pagination.pageSize = val;
      this.pullListApplicationType();
    },
    changeHandleCurrent(val) {
      // console.log(`当前页: ${val}`);
      this.pagination.currentPage = val;
      this.pullListProtections();
    },
    clickOperator(index) {
      console.log("index=>", index);
      if (index == 1) {
        this.currentTheme = "";
      }
      this.screenListProtections();
    },
    addProtect() {
      this.managerTitle = "交易保障";
      this.managerVisible = true;
    },
    editProtection(info) {
      this.managerTitle = "修改交易保障";
      let detail = JSON.parse(info.detail);
      this.managerVisible = true;
      this.form.rank = info.rank;
      this.form.icon = info.icon;
      this.form.title = info.title;
      this.form.detail = Array.isArray(detail) ? detail : [{ content: "" }];
      this.form.color = !!info.color ? info.color : "";
      this.currentEidtInfo = info;
    },
    closeManager() {
      this.managerVisible = false;
    },
    onSubmit() {
      if (this.form.rank == "") {
        this.$message.error("请输入序号!!!");
      } else if (this.form.title == "") {
        this.$message.error("请输入保障标题!!!");
      } else if (this.detailHasNull()) {
        this.$message.error("保障内容有缺值,请输入!!!");
      } else {
        let data, message;
        if (this.managerTitle == "交易保障") {
          data = {
            rank: this.form.rank,
            type: 1, // 类型，1、交易保障，暂时默认值为1
            title: this.form.title,
            detail: JSON.stringify(this.form.detail),
            status: 1, // 默认为启用
            color: this.form.color,
            icon: this.form.icon,
          };
          message = "添加成功!!!";
        } else {
          data = {
            type: this.currentEidtInfo.type,
            title: this.form.title,
            detail: JSON.stringify(this.form.detail),
            status: this.currentEidtInfo.status,
            isDel: this.currentEidtInfo.isDel,
            color: this.form.color,
            rank: this.form.rank,
            id: this.currentEidtInfo.id,
            icon: this.form.icon,
          };
          message = "修改成功!!!";
        }
        addUpdateProtection(data).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: message,
              type: "success",
            });
            this.pullListProtections();
            this.managerVisible = false;
          }
        });
      }
    },
    detailHasNull() {
      let bool = false;
      this.form.detail.forEach((element) => {
        if (element.content == "") {
          bool = true;
        }
      });
      return bool;
    },
    transDetailToContent(detail) {
      let contents = JSON.parse(detail);
      let content = "";
      if (contents.constructor == Array) {
        if (contents.length > 1) {
          contents.forEach((element, index) => {
            content += index + 1 + "." + element.content + "<br/>";
          });
        } else {
          contents.forEach((element, index) => {
            content += element.content;
          });
        }
      } else {
        content = detail;
      }
      return content;
    },
    handleChangeColor(val) {
      console.log("输出颜色值", val); // 颜色 #6c8198
    },
    addContent() {
      this.form.detail.push({
        content: "",
      });
    },
    removeContent(index) {
      this.form.detail.splice(index, 1);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#manager {
  padding: 0 5%;
  width: 90%;
  height: auto;
  .content {
    padding: 2px 0;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .operators {
      padding: 0 5px;
      width: 130px;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .el-icon-delete {
        cursor: pointer;
      }
      .addContent {
        padding-left: 5px;
        width: auto;
        height: auto;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .colorPicker {
    width: 100%;
    height: auto;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /deep/.m-colorPicker {
      text-align: center;
      /deep/.colorBtn {
        width: 80px;
        height: 30px;
        padding: 0 10px;
      }
    }
  }
}
#TransactionProtection {
  margin: 0 1% 0 1%;
  width: 98%;
  height: auto;
  .operators {
    // margin: 0 1% 0 1%;
    width: 100%;
    height: 68px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .searchList {
      width: auto;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      .theme {
        width: auto;
        height: 46px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        span {
          margin: 0 10px 0 20px;
        }
      }
      .controls {
        margin-left: 40px;
        width: 260px;
        height: 46px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 120px;
          height: 36px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-weight: 400;
          color: #5178f2;
          border: 1px solid #5178f2;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
    .addCate {
      width: 240px;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
      .add {
        width: 50%;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background-color: #5178f2;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  .table {
    margin: 1% 1% 0 1%;
    width: 98%;
    height: auto;
    span {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .icon {
        width: 50px;
        height: 50px;
        object-fit: cover;
        cursor: pointer;
      }
      .operators {
        width: 300px;
        height: 46px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .edit,
        .upshelf,
        .offshelf,
        .delete {
          width: auto;
          height: 36px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .edit,
        .upshelf {
          color: #1890ff;
        }
        .offshelf {
          color: #a6a9ad;
        }
        .delete {
          color: #fe4066;
        }
      }
    }
  }
  .pagination {
    margin: 1% 1% 0 1%;
    width: 98%;
    height: auto;
  }
}
</style>
