<template>
  <div class="container">
    <div class="head">
      <div>影像图库</div>
      <el-button type="primary" @click="addItem">添加产品</el-button>
    </div>
    <div class="app-container calendar-list-container">
      <div class="filter-container">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="所有状态">
            <el-select v-model="searchForm.status" clearable>
              <el-option
                v-for="(item, index) in bannerStatus"
                :key="index"
                :label="item"
                :value="~~index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影像分类">
            <el-select v-model="searchForm.type" clearable>
              <el-option
                v-for="(item, index) in imageTypes"
                :key="index"
                :label="item"
                :value="~~index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卫星名称">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入卫星名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search">搜索</el-button>
            <el-button type="primary" plain @click="clearFilterData"
              >清除搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="list"
        v-loading.body="listLoading"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="序号"
          prop="index"
          width="65"
        ></el-table-column>
        <el-table-column
          align="center"
          label="产品名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="产品类型"
          prop="paramJson.productType"
        ></el-table-column>
        <el-table-column
          align="center"
          label="尺寸"
          prop="imageInfoRelationListParse[0].fileWidth"
        ></el-table-column>
        <el-table-column
          align="center"
          label="价格"
          prop="imageInfoRelationListParse[0].price"
        ></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            {{ getStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              :type="scope.row.status === 1 ? 'info' : 'warning'"
              size="mini"
              @click="changeParams(scope.row, 'status')"
              >{{ scope.row.status === 1 ? "下架" : "上架" }}</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="changeParams(scope.row, 'isDel')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="page-foot">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="~~total"
        >
        </el-pagination>
        <!-- <el-pagination
          background
          layout="prev, pager, next"
          :total="~~total"
          :current-page="listQuery.page"
          @current-change="currentChange">
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
import { satelliteIntroduction } from "@/utils/formDatas.js";
import { page, update, updateStatus } from "@/api/website/imageLibrary";

export default {
  name: "satelliteIntroduction",
  data() {
    return {
      data: null, //原数据
      list: [], //赋值数据 | 过滤数据
      total: 100,
      listLoading: true, //请求加载状态
      //请求参数。页码页数等
      listQuery: this.$parent.pageInfo,
      //搜索表单
      searchForm: {
        status: this.$parent.pageInfo.status,
        type: this.$parent.pageInfo.type,
        title: this.$parent.pageInfo.title,
      },
      //添加banner与修改banner的form对象
      editForm: satelliteIntroduction.init(), //提交的表单参数
      editFormInfo: satelliteIntroduction.formInfo, //表单项。
      editFormRules: satelliteIntroduction.rules, //表单规则
      //是否启用，1、启用，2、禁用
      bannerStatus: {
        // 0: '全部',
        1: "启用",
        2: "禁用",
      },
      imageTypes: {
        //1--影像美图 2--专题图 3--遥感成果图
        // 0: '全部',
        1: "影像美图",
        2: "专题图",
        3: "遥感成果图",
      },
      dialogVisible: false,
      dialogTitle: "新增卫星",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.limit = val;

      this.getList();
    },
    changePageInfo(page) {
      // this.listQuery = page;
      this.$emit("recordPageInfo", page);
    },
    //搜索按钮
    search() {
      this.listQuery = {
        status: this.searchForm.status || null,
        type: this.searchForm.type || null,
        name: this.searchForm.title,
        page: 1,
        limit: 10,
      };
      this.changePageInfo(this.listQuery);
      this.getList();
    },
    //清除搜索
    clearFilterData() {
      this.searchForm = {
        status: 0,
        title: "",
      };

      this.listQuery = {
        status: this.searchForm.status || null,
        type: this.searchForm.type || null,
        name: this.searchForm.title,
        page: 1,
        limit: 10,
      };
      this.changePageInfo(this.listQuery);

      this.getList();
    },
    //切换页码
    currentChange(val) {
      this.listQuery.page = val;

      this.changePageInfo(this.listQuery);
      this.getList();
    },
    //编辑
    edit(row) {
      console.log(row);
      this.$emit("change", "Edit", row);
    },
    //校验表单
    submitForm() {
      let _this = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          _this.updateFunc();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //更新方法
    updateFunc() {
      update(this.editForm).then((res) => {
        if (res.status == 200) {
          this.dialogVisible = false;
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //上下架
    updateStatus() {
      updateStatus({ id: this.editForm.id, status: this.editForm.status }).then(
        (res) => {
          if (res.status == 200) {
            this.dialogVisible = false;
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        }
      );
    },
    //取消表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    //新增banner
    addItem() {
      this.$emit("change", "edit");
    },
    //获取状态
    getStatus(val) {
      return this.bannerStatus[val];
    },
    //上下架、删除更新
    changeParams(row, key) {
      this.$confirm("确定继续执行该操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.editForm = row;
        if (key == "isDel") {
          this.editForm[key] = row[key] == 0 ? 1 : 0;
        } else {
          this.editForm[key] = row[key] == 1 ? 2 : 1;
          this.updateStatus();
          return;
        }

        //更新专题
        this.updateFunc();
      });
    },
    //获取banner列表
    getList() {
      this.listLoading = true;
      page(this.listQuery)
        .then((res) => {
          this.data = res.data.data;
          this.total = res.data.totalCount;
          this.listLoading = false;
          this.list = res.data.data;
          this.list.forEach((element, index) => {
            element.index =
              (this.listQuery.page - 1) * this.listQuery.limit + (index + 1);
          });
          this.list = this.list.map((v) => {
            let len = v.imageInfoRelationList.length;
            //注意：imageInfoRelationList参数后端返回的是数组，编辑后的源文件图片被放在最后一项。所以取数组的最后一项
            v.imageInfoRelationListParse = v.imageInfoRelationList;
            // len > 0
            //   ? [v.imageInfoRelationList[v.imageInfoRelationList.length - 1]]
            //   : [];
            v.paramJson = JSON.parse(v.paramJson);
            return v;
          });
        })
        .catch((err) => {
          console.log("error", err);
          this.listLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}
.cover {
  max-width: 200px;
  height: auto;
}
.page-foot {
  margin-top: 20px;
}
</style>
