<!--
 * @Author: your name
 * @Date: 2020-12-02 10:27:53
 * @LastEditTime: 2020-12-11 17:25:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
-->
<template>
  <div id="ApplicationList">
    <!-- 操作表格栏 -->
    <div class="operators">
      <div class="applyName">
        <span>应用名称</span>
        <el-col :span="16">
          <el-input
            v-model="currentTypeName"
            placeholder="请输入类型名称"
            size="100px"
          ></el-input>
        </el-col>
      </div>
      <div class="types">
        <span>应用类别</span>
        <el-col :span="16">
          <el-input
            v-model="currentType"
            placeholder="请输入类别"
            size="100px"
          ></el-input>
        </el-col>
        <!-- <el-select v-model="currentType" placeholder="全部">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </div>
      <div class="status">
        <span>所有状态</span>
        <el-select v-model="currentStatus" placeholder="全部">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="controls">
        <div
          class="item"
          v-for="(item, index) in operatorControls"
          :key="index"
          @click.stop="clickOperator(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="addApp">
        <div class="add" @click.stop="addApp">新增应用</div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用类别" width="200" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.firstTitle
                ? scope.row.secondTitle
                  ? scope.row.firstTitle + "-" + scope.row.secondTitle
                  : scope.row.firstTitle
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用名称" align="center">
          <template slot-scope="scope">
            <span class="introduce">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情图" align="center">
          <template slot-scope="scope">
            <span>
              <img
                class="icon"
                :src="scope.row.icon.url"
                @click="showPreview(scope.row.icon)"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.crtTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150" 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>{{scope.row.operator}}</span> -->
            <span>
              <div class="operators">
                <div class="edit" @click.stop="editApp(scope.row)">编辑</div>
                <div
                  class="offshelf"
                  v-if="scope.row.status == 1"
                  @click.stop="changeInfoStatus(scope.row)"
                >
                  下架
                </div>
                <div
                  class="upshelf"
                  v-else
                  @click.stop="changeInfoStatus(scope.row)"
                >
                  上架
                </div>
                <div class="delete" @click.stop="delInfo(scope.row)">删除</div>
              </div>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="infoPagination" v-show="infoPagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="infoPagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="infoPagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="infoPagination.total"
      >
      </el-pagination>
    </div>
    <!-- 使用图片查看器预览当前缩略图 -->
    <el-image-viewer
      v-if="currentIcon.showPreview"
      :on-close="closePreview"
      :url-list="[currentIcon.url]"
    />
  </div>
</template>

<script>
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import singleImageX from "@/components/Upload/singleImageX";
// 导入请求
import {
  getAllApplicationType,
  getListApplicationType,
  addUpdateApplicationType,
  getListApplicationInfo,
  addUpdateApplicationInfo,
} from "api/website/industryApplication/index";
export default {
  name: "ApplicationList",
  components: {
    ElImageViewer,
    singleImageX,
  },
  data() {
    return {
      currentIcon: "",
      // 功能按钮
      operatorControls: [
        {
          name: "搜索",
        },
        {
          name: "清空搜索",
        },
      ],
      currentTypeName: "",
      //所有状态
      status: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "上架",
        },
        {
          value: "2",
          label: "下架",
        },
      ],
      currentStatus: "",
      // 所有类别
      types: [
        {
          value: "",
          label: "全部",
        },
      ],
      currentType: "",
      // 表格数据
      tableDataCache: [],
      tableData: [
        // {
        //   id: "1",
        //   type: "类别",
        //   name: "名称",
        //   icon: {
        //     url: "https://onemap.obtdata.com/wx/download/world.png",
        //     showPreview: false,
        //   },
        //   date: "发布时间",
        //   status: "状态",
        // },
      ],
      infoPagination: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页查询数量
        total: 0, // 总记录数量
      },
    };
  },
  mounted() {
    this.pullAllApplicationType();
    this.pullListApplicationInfo();
  },
  methods: {
    // getAttributeIndustry(attribute){
    //   return eval("("+attribute+")").industry
    // },
    editApp(info) {
      this.$parent.componentName = "addApp";
      this.$parent.info = info;
    },
    addApp() {
      this.$parent.componentName = "addApp";
      this.$parent.info = null;
    },
    // 获取所有应用类型
    pullAllApplicationType() {
      this.types = [
        {
          value: "",
          label: "全部",
        },
      ];
      getAllApplicationType().then((res) => {
        if (res.status == 200) {
          // console.log("获取所有的应用类型=>",res)
          res.data.forEach((element) => {
            if (element.isDel == 0) {
              this.types.push({
                value: element.id,
                label: element.title,
              });
            }
          });
        }
      });
    },
    clickOperator(index) {
      if (index == 1) {
        this.currentTypeName = "";
        this.currentStatus = "";
        this.currentType = "";
      }
      this.screenApplicationInfo();
    },
    // 筛选数据
    screenApplicationInfo() {
      this.tableData = [];
      let index = 0;
      this.tableDataCache.forEach((element) => {
        // 未被删除的
        if (element.isDel == 0) {
          this.tableData.push({
            index:
              (this.infoPagination.currentPage - 1) *
                this.infoPagination.pageSize +
              ++index,
            id: element.id,
            attribute: element.attribute,
            price: element.price,
            sourceFile: element.sourceFile,
            examples: element.examples,
            examplesJson: element.examplesJson,
            indexShow: element.indexShow,
            introduction: element.introduction,
            isDel: element.isDel,
            protection: element.protection,
            rank: element.rank,
            firstTypeId: element.firstTypeId,
            firstTitle: element.firstTitle,
            secondTypeId: element.secondTypeId,
            secondTitle: element.secondTitle,
            title: element.title,
            coverImg: element.coverImg,
            icon: {
              url: element.detailImg,
              showPreview: false,
            },
            crtTime: element.crtTime,
            status: element.status,
            updTime: element.updTime,
            customized: element.customized,
          });
        }
      });
      if (this.currentStatus != "") {
        this.tableData = this.tableData.filter(
          (element) => element.status == this.currentStatus
        );
      }
      if (this.currentType != "") {
        // let type = this.types.find(element => element.value == this.currentType)
        // this.tableData = this.tableData.filter(element => this.getAttributeIndustry(element.attribute) == type.label)
        this.tableData = this.tableData.filter((element) => {
          let type = element.firstTitle
            ? element.secondTitle
              ? element.firstTitle + "-" + element.secondTitle
              : element.firstTitle
            : "";
          //正则表达式
          let reg = new RegExp(this.currentType);
          return type.match(reg);
        });
      }
      if (this.currentTypeName != "") {
        this.tableData = this.tableData.filter((element) => {
          //正则表达式
          let reg = new RegExp(this.currentTypeName);
          return element.title.match(reg);
        });
      }
    },
    // 分页获取应用详情数据
    pullListApplicationInfo() {
      getListApplicationInfo({
        page: this.infoPagination.currentPage,
        limit: this.infoPagination.pageSize,
      }).then((res) => {
        if (res.status == 200) {
          console.log("分页获取到的数据=>", res);
          this.tableDataCache = [];
          this.tableData = [];
          this.infoPagination.total = res.data.totalCount;
          res.data.data.forEach((element) => {
            this.tableDataCache.push(element);
          });
          this.screenApplicationInfo();
          // this.tableDataCache.forEach(element => {
          //   // 未被删除的
          //   if(element.isDel==0){
          //     this.tableData.push({
          //       attribute:element.attribute,
          //       examples:element.examples,
          //       examplesJson: element.examplesJson,
          //       id: element.id,
          //       indexShow:element.indexShow,
          //       introduction:element.introduction,
          //       isDel:element.isDel,
          //       protection:element.protection,
          //       rank: element.rank,
          //       firstTypeId:element.firstTypeId,
          //       firstTitle: element.firstTitle,
          //       secondTypeId:element.secondTypeId,
          //       secondTitle:element.secondTitle,
          //       title: element.title,
          //       coverImg:element.coverImg,
          //       icon: {
          //         url: element.detailImg,
          //         showPreview: false,
          //       },
          //       crtTime: element.crtTime,
          //       status: element.status,
          //       updTime: element.updTime,
          //       customized: element.customized,
          //     });
          //   }
          // });
        }
      });
    },
    // 删除应用详情
    delInfo(info) {
      this.$confirm("确定继续执行该操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {
          id: info.id,
          title: info.title,
          coverImg: info.coverImg,
          detailImg: info.icon.url,
          introduction: info.introduction,
          attribute: info.attribute,
          examples: info.examples,
          examplesJson: info.examplesJson,
          protection: info.protection,
          rank: info.rank,
          status: info.status,
          firstTypeId: info.firstTypeId,
          secondTypeId: info.secondTypeId,
          indexShow: info.indexShow,
          firstTitle: info.firstTitle,
          secondTitle: info.secondTitle,
          isDel: "1",
          customized: info.customized,
        };
        console.log("删除data=>", data);
        addUpdateApplicationInfo(data).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "删除成功!!!",
              type: "success",
            });
            this.pullListApplicationInfo();
          } else {
            this.$message.error("操作失败,请稍后重试!!!");
          }
        });
      });
    },
    // 上下架数据
    changeInfoStatus(info) {
      console.log("info=>", info);
      let message = "";
      if (info.status == 1) {
        // 当前为上架
        info.status = 2;
        message = "下架成功!!!";
      } else {
        info.status = 1;
        message = "上架成功!!!";
      }
      addUpdateApplicationInfo({
        id: info.id,
        title: info.title,
        coverImg: info.coverImg,
        detailImg: info.icon.url,
        introduction: info.introduction,
        attribute: info.attribute,
        examples: info.examples,
        examplesJson: info.examplesJson,
        protection: info.protection,
        rank: info.rank,
        status: info.status,
        firstTypeId: info.firstTypeId,
        secondTypeId: info.secondTypeId,
        indexShow: info.indexShow,
        firstTitle: info.firstTitle,
        secondTitle: info.secondTitle,
        customized: info.customized,
      }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: message,
            type: "success",
          });
        } else {
          this.$message.error("操作失败,请稍后重试!!!");
        }
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.infoPagination.pageSize = val;
      this.pullListApplicationInfo();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.infoPagination.currentPage = val;
      this.pullListApplicationInfo();
    },
    onPreview(url) {
      this.form.coverImg = url;
    },
    showPreview(icon) {
      this.currentIcon = icon;
      this.currentIcon.showPreview = true;
    },
    closePreview() {
      this.currentIcon.showPreview = false;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#ApplicationList {
  margin: 0 1% 0 1%;
  width: 98%;
  height: auto;
  #addCateManager {
    padding: 0 5%;
    width: 90%;
    height: auto;
  }
  .operators {
    // margin: 0 1% 0 1%;
    width: 100%;
    height: 68px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .applyName,
    .status,
    .types {
      width: auto;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      span {
        margin: 0 10px 0 20px;
      }
    }
    .addApp {
      width: 220px;
      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;
      }
    }
    .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;
      }
    }
  }
  .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;
        }
      }
    }
  }
  .infoPagination {
    margin: 1% 1% 0 1%;
    width: 98%;
    height: auto;
  }
}
</style>
