<!--
 * @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,
            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>