<!--
 * @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="内容" 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 {
      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: "",
        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 = ""
          }
      },
  },
  mounted() {
      this.pullListProtections()
  },
  methods: {
    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,
                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,
          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,
          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.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,
            }
            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,
            }
            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>