<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div>
       <span style="font-size:14px">公司名称：</span>
       <el-input
        v-model="customerName"
        clearable
        placeholder="请输入公司名称"
        style="width: 200px;margin-bottom:20px"
        size="small"
        class="filter-item"
      />

        <span style="font-size:14px">公司类型：</span>
        <el-select style="margin-bottom:20px"  v-model="typeId"  size="medium" clearable value-key="areaId" filterable placeholder="请选择公司名称" >
              <el-option
              v-for="item in customerType"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
     
      <el-button style=" width:90px;  " size="small" type="primary" icon="el-icon-search" @click="handleFind">查询
        </el-button>
        <el-button
        class="filter-item"
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="handleAdd"
      >新增客户
      </el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="公司编号"  align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.customerId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="300" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" width="200" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="邮箱" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column label="公司类型"  align="center" width="250" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.customerTypeDetails}}</span>
           <!-- <span v-if="scope.row.customerTypeDetails === 1" size="small">有限责任公司（自然人独资）</span>
            <span v-if="scope.row.customerTypeDetails === 2" size="small">有限责任公司(自然人投资或控股)</span>
            <span v-if="scope.row.customerTypeDetails === 3" size="small">股份有限公司</span>
            <span v-if="scope.row.customerTypeDetails === 4" size="small">有限合伙企业</span>
            <span v-if="scope.row.customerTypeDetails === 5" size="small">外商独资公司</span>
            <span v-if="scope.row.customerTypeDetails === 6" size="small">个人独资企业</span>
            <span v-if="scope.row.customerTypeDetails === 7" size="small">国有独资公司</span>
            <span v-if="scope.row.customerTypeDetails === 8" size="small">其他</span> -->
        </template>
      </el-table-column>
        <el-table-column label="法定代表人" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.legalPerson}}</span>
        </template>
        </el-table-column>
        <el-table-column label="经营范围" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.businessScope}}</span>
        </template>
        </el-table-column>
        <el-table-column label="注册资本" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.registeredCapital}}</span>
        </template>
        </el-table-column>
        <el-table-column label="成立日期" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.dateOfEstablishment}}</span>
        </template>
        </el-table-column>
        <el-table-column label="营业日期" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.businessDate}}</span>
        </template>
        </el-table-column>
        <el-table-column label="住所" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.residence}}</span>
        </template>
        </el-table-column>
        <el-table-column label="创建日期" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate}}</span>
        </template>
        </el-table-column>
        <el-table-column label="修改日期" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime}}</span>
        </template>
        </el-table-column>

  <!--     </div>
    </template>
  </el-table-column> -->
      

      <el-table-column label="操作" fixed="right" width="235" min-width="150" align="center" >
        <template slot-scope="scope">
          <!-- <el-button type="text" icon="el-icon-view"  @click="lookRecord(scope.row)">查看</el-button> -->
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination">
          <el-pagination
          @size-change="handleSizeChange"
          :popper-class="currentPage"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
      <!-- <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="handleCurrentChange"
      /> -->
    </div>

     <!-- 新增修改界面 -->
    <el-dialog
      :title="isEditForm ? '编辑' : '新增'"
      width="45%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="dataRule"
        label-width="80px"
        :size="size"
        style="text-align:left;"
        @keyup.enter.native="submitForm()"
      >
        <el-form-item  label="客户名称" prop="customerName"  :label-width="formLabelWidth">
          <el-input style="width:65%"  v-model="dataForm.customerName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item   label="手机" prop="phone"  :label-width="formLabelWidth">
          <el-input style="width:65%"  v-model="dataForm.phone" placeholder="请输入手机" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input style="width:65%" v-model="dataForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="公司类型" prop="type" :label-width="formLabelWidth">
         <el-select style="width:65%" v-model="dataForm.type"  size="medium" clearable value-key="areaId" filterable placeholder="请选择公司类型" >
              <el-option
              v-for="item in customerType"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="法定代表人" prop="legalPerson" :label-width="formLabelWidth">
          <el-input style="width:65%" v-model="dataForm.legalPerson" placeholder="请输入优惠券金额" />
        </el-form-item>
        <el-form-item label="经营范围" prop="businessScope" :label-width="formLabelWidth">
          <el-input style="width:65%" v-model="dataForm.businessScope" placeholder="请输入优惠券金额" />
        </el-form-item>
        <el-form-item label="注册资本" prop="registeredCapital" :label-width="formLabelWidth">
          <el-input style="width:65%" v-model="dataForm.registeredCapital" placeholder="请输入优惠券金额" />
        </el-form-item>
        <el-form-item label="住所" prop="residence" :label-width="formLabelWidth">
          <el-input style="width:65%" v-model="dataForm.residence" placeholder="请输入优惠券金额" />
        </el-form-item>
        <el-form-item label="成立日期" prop="dateOfEstablishment" :label-width="formLabelWidth">
          <el-date-picker
            v-model="dataForm.dateOfEstablishment"
            type="datetime"
            style="width:65%" 
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始日期时间"
          />
        </el-form-item>
        <el-form-item label="营业日期" prop="businessDate" :label-width="formLabelWidth">
          <el-date-picker
            v-model="dataForm.businessDate"
            type="datetime"
            style="width:65%" 
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束日期时间"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click="submitEditForm">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {Listarea,} from '@/api/dataForm'
import { customerList,addCustomer,editCustomer,deleteCustomer} from '@/api/record'
import { parseTime } from '@/utils/index'
import { getUserInfo} from '@/api/user'

export default {
  data() {
    return {
      size: 'small',
      tableData: [],
      priceData:[],
      customerName:"",
      typeId:"",
      customerType:[
        {id:1,name:"有限责任公司（自然人独资）"},
        {id:2,name: "有限责任公司(自然人投资或控股)"},
        {id:3,name: "股份有限公司"},
        {id:4,name: "有限合伙企业"},
        {id:5,name: "外商独资公司"},
        {id:6,name: "个人独资企业"},
        {id:7,name: "国有独资公司"},
        {id:8,name: "其他"}

      ],
      areaList:[],
      query: {
        name: ''
      },
      formLabelWidth: '120px',
      isEditForm: false,
      currentPage: "1",
      pageSize: 10,
      total: 0, // 总数量
      dataForm: {
      },
      // 表单校验
      dataRule: {
        customerName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        // phone: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   { validator: checkTel, trigger: "change" },
        // ],
        email: [
          // { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern:
              /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
            message: "输入邮箱不合法",
          },
        ],
        // type: [
        //   { required: true, message: "请选择用户类型", trigger: "change" },
        // ],
        // roleList: [
        //   { required: true, message: "请选择角色", trigger: "change" },
        // ],
      },
      loading: false,
      dialogVisible: false,


    }
  },
  created() {
    this.getTenantList()
    console.log("res")
  },
  methods: {
    parseTime,
    getTenantList: function() {
      this.loading = true
      const params = new URLSearchParams()
      params.append('type', this.typeId)
      params.append('customerName', this.customerName)
      params.append('current', this.currentPage)
      params.append('size', this.pageSize)
      customerList(params).then(response => {
        // console.log("code")
        console.log(response)
        this.loading = false
        this.tableData = response.data.data.records;
        console.log("1"+ response.data.data.records)
        this.total = response.data.data.total;
      })
    },


    handleFind: function() {
      this.currentPage="1"
      this.getTenantList()
    },
    handleSizeChange:function(val){
      this.pageSize=val
      this.getTenantList()
    },
    // 换页
    handleCurrentChange: function(val) {
      let page=val.toString()
      this.currentPage = page
      this.getTenantList()
    },
    //查看
    // lookRecord:function(row){
    //     this.lookCord=row
    //     this.dialogVisible = true
    //     console.log(row)
    // },
    // 显示新增界面
    handleAdd: function() {
      this.isEditForm = false
      this.dialogVisible = true
      this.dataForm = {}
      if(this.$refs['dataForm']){
      this.$refs["dataForm"].resetFields();
      }
    },
    // 编辑界面
    handleEdit: function(row) {
      this.isEditForm = true
      this.dialogVisible = true
      this.dataForm = JSON.parse(JSON.stringify(row)) 
      if(this.$refs['dataForm']){
      this.$refs["dataForm"].resetFields();
      }
    },
    //删除
    handleDelete(row,index){
  
        this.$confirm('此操作将删除该公司, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
              deleteCustomer(row.customerId).then(response => {
                if (response.data.code === 200) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
              this.getTenantList()
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg
                  })
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
     
    },
    
    submitEditForm(){
       this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.isEditForm) {
                // 更新字典
            editCustomer(this.dataForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialogVisible = false
              this.getTenantList()
            })
          } else {
             // 新增字典
            addCustomer(this.dataForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialogVisible = false
              this.getTenantList()
              this.$refs['dataForm'].resetFields()
            })
          }
        }
      })
    }

  }
}
</script>


<style scoped>
   .el-dropdown-link {
    cursor: pointer;
    color: #1282f3;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-scrollbar__wrap {
   overflow-y: hidden;
}
</style>


