<template>
  <div class="app-container">
    <el-form v-model="pagerDto" inline>
      <el-form-item label="服务名称">
        <el-input v-model="pagerDto._Eq_ServiceName" clearable />
      </el-form-item>
      <el-form-item label="服务类型">
        <el-select
          v-model="pagerDto._Eq_ServiceType"
          placeholder="服务类型"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in serviceTypes"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
      </el-form-item>
      <el-button
        icon="el-icon-search"
        type="primary"
        @click="searchData"
      >搜索</el-button>
      <el-button
        icon="el-icon-circle-plus-outline"
        type="success"
        @click="showAddPanel"
      >新增</el-button>
    </el-form>
    <div>
      <el-table v-loading="loading" :data="sourceData" border>
        <el-table-column prop="ServiceName" label="服务名称" />
        <el-table-column prop="ServiceTypeName" label="服务类型" />
        <el-table-column label="当前状态">
          <template slot-scope="r">
            <span v-if="r.row.IsEnable">启用</span>
            <span v-if="!r.row.IsEnable">停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateUserName" label="创建人" />
        <el-table-column prop="CreateTime" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="danger"
              plain
              @click="remove(scope.row)"
            >移除</el-button> -->
            <el-button
              v-if="!scope.row.IsEnable"
              plain
              type="success"
              @click="submitEnableOrDisable(scope.row,true)"
            >启用</el-button>
            <el-button
              v-if="scope.row.IsEnable"
              plain
              type="danger"
              @click="submitEnableOrDisable(scope.row,false)"
            >停用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSerach"
      />
    </div>
    <el-dialog :visible.sync="showEditPannel">
      <el-form
        ref="editForm"
        v-loading="submiting"
        label-width="8em"
        :model="editItem"
        :rules="rules"
      >
        <el-form-item label="服务名称" prop="ServiceName">
          <el-input v-model="editItem.ServiceName" />
        </el-form-item>
        <el-form-item label="服务类型" prop="ServiceType">
          <el-select v-model="editItem.ServiceType">
            <el-option
              v-for="item in serviceTypes"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="editItem.ServiceType==4" label="关联客户" prop="CustomerId">
          <el-select v-model="editItem.CustomerId" placeholder="关联客户" filterable>
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editItem.Remark" />
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button
            size="large"
            type="success"
            @click="validtAndSubmit"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { _getFinanceIncidentalType, _getCustomers } from '@/api/baseInfo'

export default {
  name: 'FirstService',
  data() {
    return {
      loading: false,
      submiting: false,
      showEditPannel: false,
      editMode: '',
      serviceTypes: [],
      customers: [],
      editItem: {
        ServiceName: '',
        ServiceType: '',
        CustomerId: null,
        Remark: null
      },
      rules: {
        ServiceName: { required: true, message: '请填写服务名称', trigger: 'blur' },
        ServiceType: {
          validator: this.checkServiceType,
          trigger: 'blur'
        },
        CustomerId: {
          validator: this.checkCustomerId,
          trigger: 'blur'
        }
      },
      sourceData: [],
      pagerDto: {
        _Eq_ServiceName: null,
        _Eq_ServiceType: null,
        PageIndex: 1,
        PageSize: 100,
        total: 0
      }
    }
  },
  created() {
    this.pagerDto.PageIndex = 1
    this.pagerDto._Eq_ServiceName = ''
    this.pagerDto._Eq_ServiceType = null

    _getFinanceIncidentalType().then(response => {
      this.serviceTypes = response
      this.searchData()
    })
    _getCustomers().then(response => {
      this.customers = response
    })
  },
  methods: {
    checkServiceType(rule, value, callback) {
      if (!value || value <= 0) {
        callback(new Error('必须选择服务类型'))
      } else {
        callback()
      }
    },
    checkCustomerId(rule, value, callback) {
      if (!value || value <= 0) {
        callback(new Error('必须选择关联账号'))
      } else {
        callback()
      }
    },
    searchData() {
      this.loading = true
      request({
        url: '/FirstService/query',
        method: 'post',
        data: this.pagerDto
      })
        .then((resp) => {
          this.loading = false
          this.pagerDto.total = resp.TotalCount
          this.pagerDto.PageIndex = resp.PageIndex

          this.sourceData = resp.Result
        })
        .finally(() => {
          this.loading = false
        })
    },
    remove(item) {
      this.$confirm('是否删除该服务?', '正在删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: '/FirstService/remove',
          params: { id: item.Id },
          method: 'post'
        })
          .then((resp) => {
            if (resp === true) {
              const idx = this.sourceData.findIndex((i) => i.Id === item.Id)
              this.sourceData.splice(idx, 1)
            } else {
              const msg = resp.message
              this.$message(msg)
            }
          })
          .catch(() => {
            this.$message('删除出错')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    submitEnableOrDisable(item, boolValue) {
      let tipText = '停用'
      if (boolValue) { tipText = '启用' }
      this.$confirm('是否' + tipText + '该服务?', '正在' + tipText, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: '/FirstService/EnableOrDisable',
          params: { id: item.Id, isEnable: boolValue },
          method: 'post'
        })
          .then((resp) => {
            this.pagerSerach(1)
            const msg = resp.message
            this.$message(msg)
          })
          .catch(() => {
            this.$message(tipText + '出错')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    pagerSerach(p) {
      this.pagerDto.PageIndex = p
      this.searchData()
    },
    initEditItem() {
      this.editItem.Id = 0
      this.editItem.ServiceName = ''
      this.editItem.ServiceType = null
      this.editItem.Remark = ''
    },
    showAddPanel() {
      this.editMode = 'add'
      this.initEditItem()
      this.showEditPannel = true
    },
    submit() {
      const url = '/FirstService/create'
      const op = '新增'
      this.submiting = true
      request({
        url: url,
        data: this.editItem,
        method: 'post'
      })
        .then((resp) => {
          if (resp.success === true) {
            this.showEditPannel = false
            this.initEditItem()
            this.$alert(`${op}成功`, `${op}成功`, {
              confirmButtonText: '确定',
              callback: () => {
                this.searchData()
              }
            })
          } else {
            const msg = resp.message
            this.$message(msg)
          }
        })
        .finally(() => {
          this.submiting = false
        })
    },
    validtAndSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
