<template>
  <div
    class="app-container calendar-list-container"
    v-loading.body="showLoadingBody"
  >
    <div class="filter-container" ref="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        @click="handleCreate"
        type="primary"
        icon="edit"
        >添加</el-button
      >
    </div>
    <el-table
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 600px"
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="98"
      ></el-table-column>
      <el-table-column width="250" align="center" label="标题">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="标识">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            class="el-button el-button--text el-button--small"
            style="color: red"
            v-if="scope.row.type != 88"
            size="small"
            @click="deleteHandler(scope.row)"
            >删除</el-button
          >
          <!--<el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- banner modal弹窗 -->
    <el-dialog
      :title="modalTitle"
      :visible.sync="dialogVisible"
      :before-close="handleDialogClose"
    >
      <el-form
        :model="dialogFrom"
        :rules="rules"
        ref="dialogFrom"
        label-width="130px"
      >
        <el-form-item
          v-show="dialogFrom.type != '66'"
          label="标题"
          prop="title"
        >
          <el-input
            v-model="dialogFrom.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item v-show="dialogFrom.type != '66'" label="标识" prop="type">
          <el-input
            type="number"
            v-model.number="dialogFrom.type"
            placeholder="1,2,3……"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="参数"
          prop="params"
          v-show="dialogFrom.type != '88' && dialogFrom.type != '66'"
        >
          <el-input
            v-model="dialogFrom.params"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>

        <el-row v-if="dialogFrom.type == 66">
          <el-col :span="24">
            <el-form-item label="收车服务费">
              <el-input-number
                :min="0"
                :precision="2"
                :step="0.01"
                v-model="closedVehicleAmout"
                placeholder="请输入收车服务费"
              ></el-input-number>
              <span style="color: #bfcbd9">收车服务费（输入具体金额）</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 66">
          <el-col :span="24">
            <el-form-item label="平台抽成比">
              <el-input-number
                :min="0"
                :max="100"
                :step="1"
                :precision="0"
                v-model="orderExtract"
                placeholder="请输入平台抽成比例"
              ></el-input-number>
              <span style="color: #bfcbd9">平台抽成比例（输入百分比）</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 66">
          <el-col :span="24">
            <el-form-item label="订单抽成比">
              <el-input-number
                :min="0"
                :max="100"
                :step="1"
                :precision="0"
                v-model="platformExtract"
                placeholder="请输入订单抽成比例"
              ></el-input-number>
              <span style="color: #bfcbd9">订单抽成比例（输入百分比）</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="最低提现金额" prop="minAmount">
              <el-input
                v-model="dialogFrom.minAmount"
                placeholder="请输入最低提现金额"
              ></el-input>
              <span style="color: #bfcbd9"
                >钱包余额，最低提现额度，达到此金额后才能提现</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="提现手续费" prop="proceduReates">
              <el-input
                v-model="dialogFrom.proceduReates"
                placeholder="请输入提现手续费"
              ></el-input>
              <span style="color: #bfcbd9">提现收取的手续费</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="月额度" prop="amountOfMonth">
              <el-input
                v-model="dialogFrom.amountOfMonth"
                placeholder="请输入月额度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="日额度" prop="amountOfDay">
              <el-input
                v-model="dialogFrom.amountOfDay"
                placeholder="请输入日额度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="最多提现次数(月)" prop="maxNumberOfMonth">
              <el-input
                v-model="dialogFrom.maxNumberOfMonth"
                placeholder="请输入最多提现次数（月）"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="最多提现次数(日)" prop="maxNumberOfDay">
              <el-input
                v-model="dialogFrom.maxNumberOfDay"
                placeholder="请输入最多提现次数（日）"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogFrom.type == 88">
          <el-col :span="12">
            <el-form-item label="提现方式" prop="withdrawWay">
              <el-radio v-model="dialogFrom.withdrawWay" label="3"
                >线上</el-radio
              >
              <el-radio v-model="dialogFrom.withdrawWay" label="1"
                >线下自动</el-radio
              >
              <el-radio v-model="dialogFrom.withdrawWay" label="2"
                >线下手动</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-tabs
          v-model="activeName2"
          type="card"
          v-show="dialogFrom.type != 66"
        >
          <el-tab-pane label="详情" name="first">
            <!--<Editor  v-if="activeName2=='first'" @input="handelContentIncrease" :value="form.content" :myQuillEditor="'myQuillEditorContent'" :activeName2="activeName2"></Editor>-->
            <div class="editor-container" v-if="activeName2 == 'first'">
              <UE
                :editorId="activeName2"
                :defaultMsg="dialogFrom.value"
                :config="config"
                ref="ue"
                @ready="editorReadyEvent"
              ></UE>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--<el-form-item label="详情">-->
        <!--<Editor @input="handelIncrease" :value="dialogFrom.value" :myQuillEditor="'myQuillEditorContent'"></Editor>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandel">取 消</el-button>
        <el-button
          v-if="modalTitle == '创建'"
          type="primary"
          @click="create('dialogFrom')"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="update('dialogFrom')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!--多图上传-->
    <!--<el-upload-->
    <!--:multiple="multiple"-->
    <!--action="${pageContext.request.contextPath}/lookup/editEvidence/123"-->
    <!--list-type="picture-card"-->
    <!--:auto-upload="false"-->
    <!--:http-request="uploadFile"-->
    <!--ref="upload"-->
    <!--&gt;-->
    <!--<i class="el-icon-plus"></i>-->
    <!--</el-upload>-->
    <!--<el-button @click="subPicForm">提交上传</el-button>-->
  </div>
</template>
<style>
.el-table__header {
  width: 100% !important;
}
</style>
<script>
import "static/css/uploadImg.css"; // 引入图片上传组件对话框
//  import Editor from "../modal/editorTool";//富文本
import UE from "../modal/Ueditor"; //百度ue富文本
import { formatDate } from "utils/dateFormattor";

import {
  toEast8Date,
  deepCopyDate,
  newEast8Date,
  convertDate2Str,
} from "utils/dateUtils";

import {
  page,
  addGeneral,
  editGeneral,
  delGeneral,
  uploadFiles,
} from "api/base_info/general";

import rsCode from "../../utils/rsCode";

import { mapGetters } from "vuex";
import { getToken } from "../../utils/auth";

import Element1 from "../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";

export default {
  name: "tourManage",
  components: {
    ElCol,
    ElRow,
    Element1,
    UE,
    //      Editor
  },
  data() {
    return {
      multiple: true,
      formDate: "",
      listQuery: {
        page: 1,
        limit: 20,
      },
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350,
      },
      tableKey: 0,
      activeName2: "",
      modalTitle: "创建",
      BASE_API: process.env.BASE_API,
      dialogVisible: false, //添加、编辑弹框
      showLoadingBody: false,
      dialogFrom: {
        title: "",
        type: undefined,
        value: "",
        minAmount: 100,
        proceduReates: 0.001,
        amountOfMonth: "",
        amountOfDay: "",
        maxNumberOfMonth: "",
        maxNumberOfDay: "",
        withdrawWay: 1,
        params: "",
      },
      closedVehicleAmout: 0,
      orderExtract: 0,
      platformExtract: 0,
      rules: {
        title: {
          type: "string",
          required: true,
          message: "请输入标题",
          trigger: "blur",
        },
        type: {
          required: true,
          message: "请输入数字标识",
        },
        proceduReates: {
          required: true,
          message: "请输入提现手续费",
        },
        minAmount: {
          required: true,
          message: "请输入最低提现金额",
        },
        amountOfMonth: {
          required: true,
          message: "请输入月额度",
        },
        amountOfDay: {
          required: true,
          message: "请输入日额度",
        },
        maxNumberOfMonth: {
          required: true,
          message: "请输入最多提现次数（月）",
        },
        maxNumberOfDay: {
          required: true,
          message: "请输入最多提现次数（日）",
        },
        withdrawWay: {
          required: true,
          message: "请选择提现方式",
        },
      },
      list: null,
      total: null,
      listLoading: true,
      inline: true,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["elements", "belong2Type"]),
  },
  methods: {
    /**
     * 添加
     * */
    handleCreate() {
      this.cleanDialogFrom();
      this.modalTitle = "创建";
      this.activeName2 = "first";
      this.dialogVisible = true;
    },
    /**
     * 操作-删除
     * */
    deleteHandler(row) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delGeneral(row.id).then((response) => {
          if (response.status === 200) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getList();
          } else {
            this.$notify({
              title: "删除失败",
              message: rsCode.msg[response.code]
                ? rsCode.msg[response.code]
                : "操作失败！",
              type: "error",
              duration: 2000,
            });
          }
        });
      });
    },
    /**
     * 点击 X 关闭对话框的回调
     **/
    handleDialogClose() {
      this.activeName2 = "";
      this.dialogVisible = false;
    },
    /**
     * 操作-编辑
     * */
    handleUpdate(row) {
      this.modalTitle = "编辑";
      this.dialogVisible = true;
      this.cleanDialogFrom();
      typeof row.params == "object" ? delete row.params : row;

      if (row.type == 66) {
        this.closedVehicleAmout = JSON.parse(row.params).closedVehicleAmout;

        this.orderExtract = JSON.parse(row.params).orderExtract*100;
        this.platformExtract = JSON.parse(row.params).platformExtract*100;
      }
      this.dialogFrom = row;

      this.activeName2 = "first";
    },
    /**
     * 弹框-取消
     * */
    cancelHandel() {
      this.cleanDialogFrom();
      this.dialogVisible = false;
      this.activeName2 = "";
    },
    /**
     * 新建、编辑清空表单
     * */
    cleanDialogFrom() {
      this.dialogFrom = {
        title: "",
        type: undefined,
        value: "",
        minAmount: 100,
        proceduReates: 0.001,
        amountOfMonth: "",
        amountOfDay: "",
        maxNumberOfMonth: "",
        maxNumberOfDay: "",
        withdrawWay: 1,
        params: "",
      };
      this.activeName2 = "";
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    /**
     * 获取通用设置列表数据
     * */
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        let totalCountRs = undefined;
        let listRs = undefined;
        if (
          !this.$utils.isEmpty(response.data.rows) &&
          this.$utils.isInteger(response.data.total)
        ) {
          response.data.rows.map(function (item) {
            item.visible2 = false;
            if (item.type == 88) {
              //提现规则
              item.params = JSON.parse(item.params);
              item.minAmount = item.params.minAmount;
              item.proceduReates = item.params.proceduReates;
              item.amountOfMonth = item.params.amountOfMonth;
              item.amountOfDay = item.params.amountOfDay;
              item.maxNumberOfMonth = item.params.maxNumberOfMonth;
              item.maxNumberOfDay = item.params.maxNumberOfDay;
              item.withdrawWay = item.params.withdrawWay;
            }
          });
          listRs = response.data.rows;
          totalCountRs = response.data.total;
        }
        //          "{"minAmount":"11","proceduReates":"0.02"}"
        this.listLoading = false;
        this.list = listRs;
        this.total = totalCountRs;
      });
    },
    /**
     * 创建
     * */
    create(formName) {
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          let params = {
            title: this.dialogFrom.title,
            type: this.dialogFrom.type,
            value: this.dialogFrom.value,
            params: this.dialogFrom.params,
          };
          if (this.dialogFrom.type == 88 || this.dialogFrom.type == 66) {
            //提现规则
            let p = {
              minAmount: this.dialogFrom.minAmount,
              proceduReates: this.dialogFrom.proceduReates,
              amountOfMonth: this.dialogFrom.amountOfMonth,
              amountOfDay: this.dialogFrom.amountOfDay,
              maxNumberOfMonth: this.dialogFrom.maxNumberOfMonth,
              maxNumberOfDay: this.dialogFrom.maxNumberOfDay,
              withdrawWay: this.dialogFrom.withdrawWay,
              closedVehicleAmout: this.closedVehicleAmout,
              orderExtract: this.orderExtract,
              platformExtract: this.platformExtract,
            };
            params.params = JSON.stringify(p);
          } else {
            params.params = this.dialogFrom.params;
          }
          addGeneral(params).then((response) => {
            if (response.status === 200) {
              this.cleanDialogFrom();
              this.dialogVisible = false;
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "添加失败",
                message: rsCode.msg[response.code]
                  ? rsCode.msg[response.code]
                  : "操作失败！",
                type: "error",
                duration: 2000,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 编辑-更新
     * */
    update(formName) {
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          let params = {
            id: this.dialogFrom.id,
            title: this.dialogFrom.title,
            type: this.dialogFrom.type,
            value: this.dialogFrom.value,
            params: this.dialogVisible.params,
          };
          if (this.dialogFrom.type == 88 || this.dialogFrom.type == 66) {
            //提现规则
            let p = {
              minAmount: this.dialogFrom.minAmount,
              proceduReates: this.dialogFrom.proceduReates,
              amountOfMonth: this.dialogFrom.amountOfMonth,
              amountOfDay: this.dialogFrom.amountOfDay,
              maxNumberOfMonth: this.dialogFrom.maxNumberOfMonth,
              maxNumberOfDay: this.dialogFrom.maxNumberOfDay,
              withdrawWay: this.dialogFrom.withdrawWay,
              closedVehicleAmout: this.closedVehicleAmout,
              orderExtract: this.orderExtract/100,
              platformExtract: this.platformExtract/100,
            };
            params.params = JSON.stringify(p);
          } else {
            params.params = this.dialogFrom.params;
          }

          editGeneral(params).then((response) => {
            if (response.status === 200) {
              this.cleanDialogFrom();
              this.dialogVisible = false;
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "编辑失败",
                message: rsCode.msg[response.code]
                  ? rsCode.msg[response.code]
                  : "操作失败！",
                type: "error",
                duration: 2000,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 富文本  营地详情
     * */
    editorReadyEvent(instance) {
      let t = this;
      instance.addListener("contentChange", () => {
        if (t.activeName2 == "first") {
          t.dialogFrom.value = instance.getContent();
        }
      });
    },
    uploadFile(file) {
      this.formDate.append("files", file.file);
    },
    subPicForm() {
      this.formDate = new FormData();
      this.$refs.upload.submit();
      this.formDate.append("WS_CODE", "12133");
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      uploadFiles(this.formDate)
        .then((res) => {})
        .catch((res) => {});
    },
  },
};
</script>
<style>
.v-modal {
  z-index: 1000 !important;
}
.el-dialog__wrapper {
  z-index: 1008 !important;
}
</style>
