<template>
  <div>
    <el-card>
      <el-form :model="query" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
        <el-row :gutter="20">
          <!--<el-col :span="8">-->
          <!--  <el-form-item label="当前仓库:" class="query-form-item">-->
          <!--    <invSelect :value.sync="query.invCode" :params.sync="filterBadInv" :changeValue.sync="invChange"/>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8">
            <el-form-item label="编码/名称:" class="query-form-item">
              <el-input v-model="query.key" placeholder="请输入单据编号/单据名称" clearable>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="addCollectionPoints">新增单据类型</el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table v-loading="loading" :data="list" style="width: 100%" :row-style="{height: '32px' }"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <!--<el-table-column label="单据类型编号" prop="code"></el-table-column>-->
        <el-table-column label="单据类型编号" prop="fromBusTypeCode"></el-table-column>
        <el-table-column label="单据类型名称" prop="name"></el-table-column>
        <!--<el-table-column label="出入库类型" prop="mainAction">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ mainActions[scope.row.mainAction] }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="是否内部单据" prop="innerOrder">-->
        <!--  <template slot-scope="scope">-->
        <!--    <span>{{ innerOrderMap[scope.row.innerOrder] }}</span>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column label="单据来源" prop="fromType"></el-table-column>
        <!--<el-table-column label="来源单据类型" prop="fromDocumentType"></el-table-column>-->
        <!--<el-table-column label="来源接口地址" prop="fromInterAddress"></el-table-column>-->
        <!--<el-table-column label="排序" prop="sortNumber" width="50"></el-table-column>-->
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="editCollectionPoints(scope.row)"
            >编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.stop="deleteCollectionPoints(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="fromMap[fromName]"
        :visible.sync="addCollectionPointsDialogVisible"
        width="60%"
        v-if="addCollectionPointsDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form :model="formData" style="width: 100%;" ref="dataForm" :rules="formRules"
                 label-width="auto"
        >
          <el-row :gutter="24" class="el-row">
            <el-col :span="12" class="el-col">
              <!--<el-form-item label="单据类型编号:" prop="code" class="query-form-item">-->
              <!--  <el-input-->
              <!--    placeholder="请输入单据类型编号"-->
              <!--    disabled-->
              <!--    v-model="formData.code" style="width: 80%"-->
              <!--    auto-complete="off"-->
              <!--  ></el-input>-->
              <!--</el-form-item>-->
            </el-col>
            <el-col :span="12" class="el-col">
              <el-form-item label="单据类型编号:" prop="fromBusTypeCode" class="query-form-item">
                <el-input
                  placeholder="请输入单据类型编号"
                  v-model="formData.fromBusTypeCode" style="width: 80%"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="el-col">
              <el-form-item label="单据类型名称:" prop="name" class="query-form-item">
                <el-input
                  placeholder="请输入单据类型名称"
                  v-model="formData.name" style="width: 80%"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="24" class="el-row">-->
          <!--  <el-col :span="12" class="el-col">-->
          <!--    <el-form-item label="出入库类型:" prop="mainAction" class="query-form-item">-->
          <!--      <el-select v-model="formData.mainAction" style="width: 80%" placeholder="请选择出入库类型" clearable>-->
          <!--        <el-option label="出库" :value="mainActionMap.out"></el-option>-->
          <!--        <el-option label="入库" :value="mainActionMap.in"></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--  <el-col :span="12" class="el-col">-->
          <!--    <el-form-item label="是否内单据:" prop="innerOrder" class="query-form-item">-->
          <!--      <el-select v-model="formData.innerOrder" style="width: 80%" placeholder="请选择" clearable>-->
          <!--        <el-option label="否" :value="0"></el-option>-->
          <!--        <el-option label="是" :value="1"></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--</el-row>-->
          <!--<el-row :gutter="24" class="el-row">-->
          <!--  <el-col :span="12" class="el-col">-->
          <!--    <el-form-item label="出入库类型:" prop="mainAction" class="query-form-item">-->
          <!--      <el-select v-model="formData.mainAction" style="width: 80%" placeholder="请选择出入库类型" clearable>-->
          <!--        <el-option label="出库" :value="mainActionMap.out"></el-option>-->
          <!--        <el-option label="入库" :value="mainActionMap.in"></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--  <el-col :span="12" class="el-col">-->
          <!--    <el-form-item label="是否内单据:" prop="innerOrder" class="query-form-item">-->
          <!--      <el-select v-model="formData.innerOrder" style="width: 80%" placeholder="请选择" clearable>-->
          <!--        <el-option label="否" :value="0"></el-option>-->
          <!--        <el-option label="是" :value="1"></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--</el-row>-->
          <el-row :gutter="24" class="el-row">
            <el-col :span="12" class="el-col">
              <el-form-item label="来源系统:" prop="name" class="query-form-item">
                <el-input
                  placeholder="请输入来源系统"
                  v-model="formData.fromType" style="width: 80%"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>

            <!--<el-col :span="12" class="el-col">-->
            <!--  <el-form-item label="来源单据类型:" prop="fromDocumentType" class="query-form-item">-->
            <!--    <el-input-->
            <!--      placeholder="请输入来源单据类型"-->
            <!--      v-model="formData.fromDocumentType" style="width: 80%"-->
            <!--      auto-complete="off"-->
            <!--    ></el-input>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
          </el-row>
          <el-row :gutter="24" class="el-row">
            <!--<el-col :span="12" class="el-col">-->
            <!--  <el-form-item label="来源接口地址:" prop="fromInterAddress" class="query-form-item">-->
            <!--    <el-input-->
            <!--      placeholder="请输入来源接口地址"-->
            <!--      v-model="formData.fromInterAddress" style="width: 80%"-->
            <!--      auto-complete="off"-->
            <!--    ></el-input>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="12" class="el-col">-->
            <!--  <el-form-item label="排序:" prop="sortNumber" class="query-form-item">-->
            <!--    <el-input-number-->
            <!--      :min="0"-->
            <!--      :max="999"-->
            <!--      :precision='0' :step='1'-->
            <!--      placeholder="数字越大字段排在越前面"-->
            <!--      v-model="formData.sortNumber" style="width: 80%"-->
            <!--      auto-complete="off"-->
            <!--    ></el-input-number>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
          </el-row>
            <el-row :gutter="24" class="el-row">
            <el-col :span="22" class="el-col">
              <el-form-item label="备注:" prop="remark" class="query-form-item">
                <el-input
                  v-model="formData.remark" style="width: 100%"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="hideForm">取消</el-button>
          <el-button
            type="primary"
            @click.native="formSubmit()"
          >提交
          </el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getCollectBusType,
  addCollectBusType,
  updateCollectBusType,
  delCollectBusType, genCode
} from '@/api/basic/collectPoint/gatherOrderType'
import { getBusTypeList } from '@/api/basic/busType'

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10
      },
      showSearch: true,
      filterBadInv: true,
      loading: false,
      list: [],
      fromName: 'add',
      fromMap: {
        'add': '新增单据类型',
        'edit': '编辑单据类型'
      },
      addCollectionPointsDialogVisible: false,
      formData: {},
      code: '',
      total: 0,
      busTypes: [],
      formRules: {
        name: [
          { required: true, message: '请输入单据类型名称', trigger: 'blur' }
        ],
        fromType: [
          { required: true, message: '请选择来源', trigger: 'blur' }
        ],
        // invCode: [
        //   { required: true, message: '请选择单据所属仓库', trigger: 'blur' }
        // ],
        mainAction: [
          { required: true, message: '请选择出入库类型', trigger: 'blur' }
        ],
        innerOrder: [
          { required: true, message: '是否内部单据', trigger: 'blur' }
        ]
      },
      mainActions: {
        WareHouseIn: '入库',
        WareHouseOut: '出库'
      },
      innerOrderMap: {
        0: '否',
        1: '是'
      },
      mainActionMap: {
        in: 'WareHouseIn',
        out: 'WareHouseOut'
      }
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.query = {
        page: 1,
        limit: 10,
      }
      this.getList()
    },
    onSubmit() {
      this.query.page = 1
      this.getList()
    },
    addCollectionPoints() {
      this.fromName = 'add'
      genCode().then(res => {
        if (res.code == 20000){
          this.code = res.data
          this.formData = {
            code: res.data
          }
          this.addCollectionPointsDialogVisible = true
        }
      })
    },
    getList() {
      this.loading = true
      getCollectBusType(this.query).then((response) => {
        if (response.code == 20000) {
          this.list = response.data.list || []
          this.total = response.data.total || 0
        } else {
          this.$message.error(response.message)
        }
        this.loading = false
      })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
        })
    },
    getBusType() {
      let query = {
        enabled: true,
        page: 1,
        limit: 10
      }
      getBusTypeList(query)
        .then((response) => {
          this.busTypes = response.data.list || []
          // this.filterQuery.action = this.busTypes[0].action;
          // this.getList();
        })
        .catch(() => {
        })
    },
    hideForm() {
      this.addCollectionPointsDialogVisible = false
    },
    formSubmit() {
      // this.formData.invCode =  this.$store.getters.locInvCode
      if (this.fromName == 'add') {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addCollectBusType(this.formData).then(res => {
              if (res.code == 20000) {
                this.$message.success('新增成功')
                this.addCollectionPointsDialogVisible = false
                this.getList()
              } else {
                this.$message.error('新增失败')
              }
            }).catch(() => {
            })
          }
        })
      } else {
        updateCollectBusType(this.formData).then(res => {
          if (res.code == 20000) {
            this.$message.success('更新成功')
            this.addCollectionPointsDialogVisible = false
            this.getList()
          } else {
            this.$message.error('更新失败')
          }
        })
      }
    },
    editCollectionPoints(row) {
      this.fromName = 'edit'
      this.formData = row
      this.addCollectionPointsDialogVisible = true
    },
    deleteCollectionPoints(row) {
      this.$confirm('此操作将永久删除该单据类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCollectBusType(row).then(res => {
          if (res.code == 20000) {
            this.$message.success('删除成功')
            this.getList()
          }else {
            this.$message.error(res.message)
            this.getList()
          }
        }).catch(() => {

        })
      })
    }
  },
  created() {
    this.getList()
    this.getBusType()

  }

}
</script>

<style scoped>
.dialog-footer {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
