<template>
  <div class="wraper">
    <div class="table_wrap" v-loading="loading">
      <table-vue
        :sourceData="sourceData"
        ref="multipleTable"
        :tableColumns="tableColumns"
        @currentChange="currentTabFn"
        :rowClassName="cellClass"
        @selectionChange="selectionChange"
      ></table-vue>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="paginationOptions.total"
        :page-size="paginationOptions.pageSize"
        :current-page="paginationOptions.currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 弹出层 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="is_title == 1 ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form
        label-position="right"
        label-width="140px"
        size="mini"
        :inline="true"
        :model="addcurrencyform"
        :rules="addrules"
        ref="addcurrencyform"
      >
        <el-form-item label="币种代码" prop="currencyCode">
          <el-input
            v-model="addcurrencyform.currencyCode"
            placeholder="请输入币种代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="币种名称" prop="currencyName">
          <el-input
            v-model="addcurrencyform.currencyName"
            placeholder="请输入币种名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="兑人民币汇率"
          prop="exchangeCnyRate"
        >
          <el-input
            v-model="addcurrencyform.exchangeCnyRate"
            placeholder="兑人民币汇率"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="兑美元汇率"
          prop="exchangeUsdRate"
        >
          <el-input
            v-model="addcurrencyform.exchangeUsdRate"
            placeholder="兑美元汇率"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="addcurrencyform.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          size="mini"
          style="width: 100px"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="addCurrency()"
          size="mini"
          style="width: 100px"
        >
          确认
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import axios from '../../common/api/axios'
import tableVue from '@/common/components/base/tableView.vue'
export default {
  name: 'basics_currency',
  components: {
    tableVue,
  },
  data() {
    return {
      is_title: 1,
      select: '',
      sourceData: [],
      searchForm: {},
      dialogVisible: false,
      addcurrencyform: {
        id: '',
        currencyCode: '',
        currencyName: '',
        exchangeUsdRate: '',
        exchangeCnyRate: '',
        remark: '',
      },
      addcurrencyform2: null,
      formId: null,
      addrules: {
        exchangeUsdRate: [
          {
            required: true,
            message: '请输入汇率',
            trigger: 'blur',
          },
          {
            pattern: /^(\d+)?(\.\d+)?$/,
            message: '只能输入数字',
          },
        ],
        exchangeCnyRate: [
          {
            required: true,
            message: '请输入汇率',
            trigger: 'blur',
          },
          {
            pattern: /^(\d+)?(\.\d+)?$/,
            message: '只能输入数字',
          },
        ],
        currencyCode: [
          {
            required: true,
            message: '请输入币种代码',
            trigger: 'blur',
          },
        ],
        currencyName: [
          {
            required: true,
            message: '请输入币种名称',
            trigger: 'blur',
          },
        ],
      },
      paginationOptions: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      loading: false,
    }
  },
  created() {
    this.getList()
    this.addcurrencyform2 = JSON.parse(
      JSON.stringify(this.addcurrencyform),
    )
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '币种代码',
          key: 'currencyCode',
        },
        {
          label: '币种名称',
          key: 'currencyName',
        },
        {
          label: '兑人民币汇率',
          key: 'exchangeCnyRate',
          align: 'center',
        },
        {
          label: '兑美元汇率',
          key: 'exchangeUsdRate',
          align: 'center',
        },
      ]
    },
  },
  methods: {
    onCurrentChange(currentPage) {
      this.paginationOptions.currentPage = currentPage
      this.getList()
    },
    sizeChange(pageSize) {
      this.paginationOptions.pageSize = pageSize
      this.getList()
    },
    cellClass({ row }) {
      if (row.authAuditFlag === 1) {
        return 'first'
      } else {
        return ''
      }
    },
    selectionChange(selection) {
      if (selection.length > 0) {
        this.select = selection
      }
    },
    search() {
      this.paginationOptions.currentPage = 1
      this.getList()
    },
    currentTabFn(val) {
      if (val.row) {
        this.formId = val.row.id
      }
    },
    // 修改新增
    addDialog(i, v = null) {
      if (i === 2) {
        if (v) this.formId = v.id
        if (!this.formId) {
          return this.$message('请勾选至少一条记录')
        }
        this.selectSection()
      } else {
        this.$nextTick(() => {
          this.addcurrencyform = JSON.parse(
            JSON.stringify(this.addcurrencyform2),
          )
        })
        this.is_title = i
        this.dialogVisible = true
      }
      if (this.$refs.addcurrencyform) {
        this.$refs.addcurrencyform.resetFields()
      }
    },
    addCurrency() {
      if (this.is_title === 1) {
        this.addSection()
      } else {
        this.upSection()
      }
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    // 查询
    getList() {
      this.loading = true
      const {
        pageSize,
        currentPage,
      } = this.paginationOptions
      axios
        .post('manage/rest/exchangeRateListPage', {
          pageSize,
          currentPage,
          ...this.searchForm,
        })
        .then(res => {
          this.loading = false
          if (res.code === 200) {
            this.sourceData = res.data.records
            this.paginationOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true,
            })
          }
        })
    },

    // 修改
    upSection() {
      const url = 'platform/user/update'
      this.$refs.addcurrencyform.validate(valid => {
        if (valid) {
          const data = JSON.parse(
            JSON.stringify(this.addcurrencyform),
          )
          let roleIds = this.addcurrencyform.funcRoleIds.concat(
            this.addcurrencyform.dataRoleIds,
          )
          roleIds = roleIds.join()
          data.roleIds = roleIds
          axios.post(url, data).then(res => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$message({
                message: '修改成功',
                type: 'success',
              })
              this.getList(
                this.paginationOptions.currentPage,
              )
            } else {
              this.$alert(res.message, '错误提示', {
                dangerouslyUseHTMLString: true,
              })
            }
          })
        }
      })
    },
    // 新增
    addSection() {
      const url = 'baseExchangeRateCur/add'
      this.$refs.addcurrencyform.validate(valid => {
        if (valid) {
          const data = JSON.parse(
            JSON.stringify(this.addcurrencyform),
          )
          let roleIds = this.addcurrencyform.funcRoleIds.concat(
            this.addcurrencyform.dataRoleIds,
          )
          roleIds = roleIds.join()
          data.roleIds = roleIds
          axios.post(url, data).then(res => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$alert(
                '添加成功\n\r 用户密码为：' +
                  res.data?.passWord || '',
              )

              this.getList()
            } else {
              this.$alert(res.message, '错误提示', {
                dangerouslyUseHTMLString: true,
              })
            }
          })
        }
      })
    },
    // 删除
    deleteSection(v) {
      let arr = []
      if (v) arr.push(v)
      else arr = this.select
      const leng = arr.length
      if (leng === 0) {
        return this.$message('请勾选至少一条记录')
      }
      let ids = []
      ids = arr.map(v => {
        return v.id
      })
      ids = ids.join()
      this.$confirm('确定删除选中的信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          axios
            .get('platform/user/delete', {
              params: {
                ids: ids,
              },
            })
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.getList()
              } else {
                this.$alert(res.message, '错误提示', {
                  dangerouslyUseHTMLString: true,
                })
              }
            })
        })
        .catch(() => {})
    },
  },
}
</script>
<style scoped>
.wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table_wrap {
  flex: 1;
}
.circle {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.my-table >>> .first {
  background-color: red !important;
  color: #fff !important;
}
</style>