<template>
  <div>
    <div>
      <div class="flex-align-center" style="margin-bottom:20px">
        <el-button v-if="editShow" size="small" slot="reference" class="inline-16" type="primary" :disabled="disabled || !tool.checkAuth($route.name,'contractClauseManage')" @click="editClick">编 辑</el-button>
        <el-button v-if="saveShow" size="small" slot="reference" class="inline-16" type="warning" :disabled="disabled || !tool.checkAuth($route.name,'contractClauseManage')" @click="submit">保 存</el-button>
        <el-button v-if="saveShow" size="small" slot="reference" class="inline-16" :disabled="disabled || !tool.checkAuth($route.name,'contractClauseManage')" @click="reset" >重 置</el-button>
<!--        <el-popconfirm title="确定重置当前合同吗？" @confirm="reset()">

        </el-popconfirm>-->
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div style="margin-bottom: 20px" >
          <el-descriptions title="合同条款" :column="1" border labelClassName="my-label" contentClassName="my-content" style="font-size: 15px" >
            <el-descriptions-item label="压力等级" label-class-name="my-label" content-class-name="my-content">
              <el-input v-model="form.dataextend.pressure" placeholder="未做特殊备注,请填写压力等级" :disabled="editShow"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="运输费承担方">
              <el-select v-model="freightpayer" placeholder="请选择" style="width: 100%" :disabled="editShow">
                <el-option
                    v-for="item in freightpayerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="交货方式">
              <el-select v-model="form.deliverymode" placeholder="请选择" style="width: 100%" :disabled="editShow">
                <el-option
                    v-for="item in deliverymodeList"
                    :key="item.rowindex"
                    :label="item.value"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="付款方式">
              <template slot="label">
                <span style="color: red">*</span>
                付款方式
              </template>
              <el-select v-model="form.paytype" placeholder="请选择" style="width: 100%" :disabled="editShow">
                <el-option
                    v-for="item in paytypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="付款方式(合同条款)">
              <el-input autosize type="textarea" v-model="clause[0].content" placeholder="请填写" style="margin-bottom: 10px" :disabled="editShow"></el-input>
              <el-input autosize type="textarea" v-model="clause[1].content" placeholder="请填写" style="margin-bottom: 10px" :disabled="editShow"></el-input>
              <el-input autosize type="textarea" v-model="clause[2].content" placeholder="请填写" style="margin-bottom: 10px" :disabled="editShow"></el-input>
              <el-input autosize type="textarea" v-model="clause[3].content" placeholder="请填写" :disabled="editShow"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>

    <div style="width: 100%" class="inline-16">
      <el-descriptions title="落款信息" :column="1" border labelClassName="my-label" contentClassName="my-content" style="font-size: 15px">
      </el-descriptions>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div >
          <el-descriptions title="" :column="1" border labelClassName="my-label" contentClassName="my-content" style="font-size: 15px;margin-bottom: 10px">
            <el-descriptions-item label="乙方(需方)" label-class-name="my-label" content-class-name="my-content">
              <el-input v-model="form.partb.enterprisename" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="税号">
              <el-popover
                  placement="bottom"
                  width="900"
                  trigger="click"
                  :disabled="editShow"
                  v-model="taxnoShow"
                  @show="taxnoList">
                <el-input
                    style="width:300px;margin-bottom: 10px"
                    placeholder="请输入内容"
                    v-model="taxnoParam.content.where.condition"
                    clearable
                    @clear="taxnoList(taxnoParam.content.pageNumber = 1)"
                    size="mini"
                    @keyup.enter.native="taxnoList(taxnoParam.content.pageNumber = 1)">
                  <i slot="prefix" class="el-icon-search" @click="taxnoList(taxnoParam.content.pageNumber = 1)"></i>
                </el-input>
                <el-table :data="taxno.taxnoData" @row-click="taxnoData" height="396px" :header-cell-style="{background:'#EEEEEE',color:'#333'}" size="mini">
                  <el-table-column
                      label="开票抬头"
                      width="180">
                    <template slot-scope="scope">
                      <span >{{ scope.row.enterprisename?scope.row.enterprisename:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="税号"
                      width="180">
                    <template slot-scope="scope">
                      <span>{{ scope.row.taxno?scope.row.taxno:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="开户银行"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.bank?scope.row.bank:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="开户账号"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.bankcardno?scope.row.bankcardno:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="开票地址"
                      width="300"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.address?scope.row.address:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="电话"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.phonenumber?scope.row.phonenumber:'--' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="container normal-panel" style="text-align:right">
                  <el-pagination
                      background
                      small
                      @size-change="handleSizeChangeTaxno"
                      @current-change="handleCurrentChangeTaxno"
                      :page-sizes="[10,20,50,100,]"
                      layout="total,sizes, prev, pager, next, jumper"
                      :current-page="taxno.currentPage"
                      :total="taxno.total">
                  </el-pagination>
                </div>
                <el-input slot="reference" :readonly="true"  v-model="form.partb.taxno" autocomplete="off" placeholder="请选择税号信息"   :disabled="editShow"></el-input>
              </el-popover>
            </el-descriptions-item>
            <el-descriptions-item label="开户银行">
              <el-input v-model="form.partb.bank" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="开户账号">
              <el-input v-model="form.partb.bankcardno" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              <el-popover
                  placement="bottom"
                  width="900"
                  trigger="click"
                  :disabled="editShow"
                  v-model="addressShow"
                  @show="addressList">
                <el-input
                    style="width:300px;margin-bottom: 10px"
                    placeholder="请输入内容"
                    v-model="addressParam.content.where.condition"
                    clearable
                    @clear="addressList(addressParam.content.pageNumber = 1)"
                    size="mini"
                    @keyup.enter.native="addressList(addressParam.content.pageNumber = 1)">
                  <i slot="prefix" class="el-icon-search" @click="addressList(addressParam.content.pageNumber = 1)"></i>
                </el-input>
                <el-table :data="address.addressData" @row-click="addressData" height="396px" :header-cell-style="{background:'#EEEEEE',color:'#333'}" size="mini">
                  <el-table-column
                      label="省市县"
                      width="180">
                    <template slot-scope="scope">
                      <span >{{ scope.row.province?scope.row.province+'-'+scope.row.city+'-'+scope.row.county:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="详细地址"
                      >
                    <template slot-scope="scope">
                      <span>{{ scope.row.address?scope.row.address:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="地址类型"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.tag.length !== 0">
                        <span v-for="item in address.tags" :key="item.index" style="float: left;margin-left: 5px">
                          <el-tag color="#FAAB16" size="mini" type="warning" effect="dark">
                            <span>{{item}}</span>
                          </el-tag>
                        </span>
                      </span>
                      <span v-else>--</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="备注"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.remarks?scope.row.remarks:'--' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="container normal-panel" style="text-align:right">
                  <el-pagination
                      background
                      small
                      @size-change="handleSizeChangeAddress"
                      @current-change="handleCurrentChangeAddress"
                      :page-sizes="[10,20,50,100,]"
                      layout="total,sizes, prev, pager, next, jumper"
                      :current-page="address.currentPage"
                      :total="address.total">
                  </el-pagination>
                </div>
                <el-input slot="reference" :readonly="true"  v-model="form.partb.address" autocomplete="off" placeholder="请选择地址"   :disabled="editShow"></el-input>
              </el-popover>
            </el-descriptions-item>
            <el-descriptions-item label="电话">
              <el-popover
                  placement="bottom"
                  width="900"
                  trigger="click"
                  :disabled="editShow"
                  v-model="contactShow"
                  @show="contactsList">
                <el-input
                    style="width:300px;margin-bottom: 10px"
                    placeholder="请输入内容"
                    v-model="contactsParam.content.where.condition"
                    clearable
                    @clear="contactsList(contactsParam.content.pageNumber = 1)"
                    size="mini"
                    @keyup.enter.native="contactsList(contactsParam.content.pageNumber = 1)">
                  <i slot="prefix" class="el-icon-search" @click="contactsList(contactsParam.content.pageNumber = 1)"></i>
                </el-input>
                <el-table :data="contacts.contactsData" @row-click="contactsData" height="396px" :header-cell-style="{background:'#EEEEEE',color:'#333'}" size="mini">
                  <el-table-column
                      label="姓名"
                      width="80">
                    <template slot-scope="scope">
                      <span >{{ scope.row.name?scope.row.name:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="手机号"
                      width="120">
                    <template slot-scope="scope">
                      <span>{{ scope.row.phonenumber?scope.row.phonenumber:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="邮箱"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.email?scope.row.email:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="部门"
                      width="80"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.depname?scope.row.depname:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="职位"
                      width="80"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.position?scope.row.position:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="性别"
                      width="80"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.sex?scope.row.sex:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="生日"
                      width="180"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.birthday?scope.row.birthday:'--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="家庭住址"
                  >
                    <template slot-scope="scope">
                      <span >{{ scope.row.address?scope.row.address:'--' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="container normal-panel" style="text-align:right">
                  <el-pagination
                      background
                      small
                      @size-change="handleSizeChangeContacts"
                      @current-change="handleCurrentChangeContacts"
                      :page-sizes="[10,20,50,100,]"
                      layout="total,sizes, prev, pager, next, jumper"
                      :current-page="contacts.currentPage"
                      :total="contacts.total">
                  </el-pagination>
                </div>
                <el-input slot="reference" :readonly="true"  v-model="form.partb.phonenumber" autocomplete="off" placeholder="请选择联系人"   :disabled="editShow"></el-input>
              </el-popover>
<!--              <el-input v-model="form.partb.phonenumber" placeholder="请填写" :disabled="editShow"></el-input>-->
            </el-descriptions-item>
            <el-descriptions-item label="法人">
              <el-input v-model="form.partb.contact" placeholder="请填写" :disabled="editShow"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
      <el-col :span="12">
        <div  >
          <el-descriptions title="" :column="1" border labelClassName="my-label" contentClassName="my-content" style="font-size: 15px;margin-bottom: 10px">
            <el-descriptions-item label="甲方(供方)" label-class-name="my-label" content-class-name="my-content">
              <el-input v-model="form.parta.enterprisename" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="税号">
              <el-input v-model="form.parta.taxno" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="开户银行">
              <el-input v-model="form.parta.bank" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="开户账号">
              <el-input v-model="form.parta.bankcardno" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              <el-input v-model="form.parta.address" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="电话">
              <el-input v-model="form.parta.phonenumber" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="法人">
              <el-input v-model="form.parta.contact" placeholder="请填写" disabled></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props:['disabled','sys_enterpriseid'],
  components: {},
  name: '',
  data() {
    return {
      input:'',
      saveShow:false,
      editShow:true,
      taxnoShow:false,
      addressShow:false,
      contactShow:false,
      form: {
        "sa_contractid": '',
        "sys_enterpriseid":'',
        "dataextend": {
          "pressure": "" //压力等级
        },
        "deliverymode": "", //交货方式
        "paytype": "1", //付款方式
        "parta": {
          "taxno": "",
          "bank": "",
          "bankcardno": "",
          "address": "",
          "phonenumber": "",
          "contact": "",
          "freightpayer": 0 //运输费承担方
        },
        "partb": {
          "taxno": "",
          "bank": "",
          "bankcardno": "",
          "address": "",
          "phonenumber": "",
          "contact": "",
          "freightpayer": 1 //运输费承担方
        }
      },
      freightpayer:'',
      freightpayerList:[
        {
          label:'甲方',
          value:'甲方',
        },
        {
          label:'乙方',
          value:'乙方',
        }
      ],
      deliverymodeList:{},
      paytypeList:[
        {
          label:'发货即收款',
          value:'发货即收款',
        },
        {
          label:'发货15日收款',
          value:'发货15日收款',
        },
        {
          label:'发货30日收款',
          value:'发货30日收款',
        },
      ],
      clause:[
        {
          sa_contract_clauseid: 0,
          content: ""
        },
        {
          sa_contract_clauseid: 0,
          content: ""
        },
        {
          sa_contract_clauseid: 0,
          content: ""
        },
        {
          sa_contract_clauseid: 0,
          content: ""
        }
      ],
      taxnoParam:{
        "id": 20221013160602,
        "content": {
          "sys_enterpriseid":'',
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        },
      },
      taxno:{
        taxnoData:[],
        total:0,
        currentPage:0,
      },
      addressParam:{
        "id": "20221022165503",
        "content": {
          "sys_enterpriseid": '',
          "where": {
            "condition": "",
            "workaddress": 1//0表示人，1表示地址
          }
        }
      },
      address:{
        addressData:[],
        total:0,
        currentPage:0,
        tags:[]
      },
      contactsParam:{
        "id": "20221022165503",
        "content": {
          "sys_enterpriseid": '',
          "where": {
            "condition": "",
            "workaddress": 0//0表示人，1表示地址
          }
        }
      },
      contacts:{
        contactsData:[],
        total:0,
        currentPage:0,
      }
    };
  },
  computed:{
  },
  watch:{
  },
  created () {
  },
  mounted() {
    this.queryDeliverymode()
    this.queryContractTerms()
    this.queryClause()
  },
  methods: {
    /*获取交货方式*/
    async queryDeliverymode(){
      const res = await this.$api.requested({
        classname: "sysmanage.develop.optiontype.optiontype",
        method: "optiontypeselect",
        content: {
          pageNumber: 1,
          pageSize: 20,
          typename: "deliverymode",
          parameter: {},
        },
      })
      this.deliverymodeList = res.data
      this.form.paytype = this.paytypeList[0].value
    },
    /*查询合同条款*/
    async queryContractTerms(){
      const res = await this.$api.requested({
        "id": 20230117112102,
        "content": {
          "sa_contractid": this.$route.query.id,
          "sys_enterpriseid":this.sys_enterpriseid
        },
      })
      this.form = Object.assign({},this.form,res.data)
      if (this.form.paytype === ''){
        this.form.paytype = this.paytypeList[0].value
      }
      if (this.form.parta.freightpayer === 1){
        this.freightpayer= '甲方'
      }else {
        this.freightpayer = '乙方'
      }
    },
    async submit(){
      if (this.form.freightpayer === '甲方'){
        this.form.parta.freightpayer = 0
        this.form.partb.freightpayer = 1
      }else {
        this.form.partb.freightpayer = 0
        this.form.parta.freightpayer = 1
      }
      this.form.sys_enterpriseid = this.sys_enterpriseid
      const res = await this.$api.requested({
        "id": 20230117112002,
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.editShow = true
        this.saveShow = false
        this.editClause()
      })
    },
    editClick(){
      this.editShow = false
      this.saveShow = true
    },
    /*获取条款*/
    async queryClause(){
      const res = await this.$api.requested({
        "id": 20221128162302,
        "content": {
          "sa_contractid":this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 4,
          "where": {
            "condition": ""
          }
        },
      })
      console.log(res.data,"条款信息")
      res.data.forEach((item,index) =>{
        this.clause[index].sa_contract_clauseid = item.sa_contract_clauseid
        this.clause[index].content = item.content
      })
      console.log(this.clause)
    },
    /*编辑条款*/
    async editClause(){
      const res = await this.$api.requested({
        "id": 20221128144502,
        "content": {
          "sa_contractid": this.$route.query.id,
          "items": this.clause
        },
      })

    },
    /*获取税号*/
    async taxnoList(){
      this.taxnoParam.content.sys_enterpriseid = this.sys_enterpriseid
      const res = await this.$api.requested(this.taxnoParam)
      this.taxno.taxnoData = res.data
      this.taxno.total = res.total
      this.taxno.currentPage = res.pageNumber
    },
    /*选择税号*/
    taxnoData(val){
      console.log(val,'选择的税号信息')
      this.form.partb.taxno = val.taxno
      this.form.partb.bank = val.bank
      this.form.partb.bankcardno = val.bankcardno
      this.taxnoShow = false
    },
    handleSizeChangeTaxno(val){
      this.taxnoParam.content.pageSize = val
      this.taxnoList()
    },
    handleCurrentChangeTaxno(val) {
      // console.log(`当前页: ${val}`);
      this.taxnoParam.content.pageNumber = val
      this.taxnoList()
    },
    /*获取地址*/
    async addressList(){
      this.addressParam.content.sys_enterpriseid = this.sys_enterpriseid
      const res = await this.$api.requested(this.addressParam)
      this.address.addressData = res.data
      this.address.total = res.total
      this.address.currentPage = res.pageNumber
      this.address.tags = res.data[0].tag
    },
    addressData(val){
      console.log(val,"地址")
      this.form.partb.address = val.address
      this.addressShow = false
    },
    handleSizeChangeAddress(val){
      this.addressParam.content.pageSize = val
      this.addressList()
    },
    handleCurrentChangeAddress(val) {
      // console.log(`当前页: ${val}`);
      this.addressParam.content.pageNumber = val
      this.addressList()
    },
    /*获取联系人*/
    async contactsList(){
      this.contactsParam.content.sys_enterpriseid = this.sys_enterpriseid
      const res = await this.$api.requested(this.contactsParam)
      this.contacts.contactsData = res.data
      this.contacts.total = res.total
      this.contacts.currentPage = res.pageNumber
    },
    contactsData(val){
      console.log(val,"联系人信息")
      this.form.partb.phonenumber = val.phonenumber
      this.contactShow = false
    },
    handleSizeChangeContacts(val){
      this.contactsParam.content.pageSize = val
      this.contactsList()
    },
    handleCurrentChangeContacts(val) {
      // console.log(`当前页: ${val}`);
      this.contactsParam.content.pageNumber = val
      this.contactsList()
    },
    /*重置*/
    reset(){
      console.log("重置操作执行")
      this.form.dataextend.pressure = ''
      this.freightpayer = ''
      this.form.deliverymode = ''
      this.form.partb.taxno = ''
      this.form.partb.bank = ''
      this.form.partb.bankcardno = ''
      this.form.partb.address = ''
      this.form.partb.phonenumber = ''
      this.form.partb.contact = ''
      this.form.paytype = this.paytypeList[0].value

      this.clause[0].content = ''
      this.clause[1].content = ''
      this.clause[2].content = ''
      this.clause[3].content = ''
      /*this.clause = [
        {
          sa_contract_clauseid: '',
          content: ""
        },
        {
          sa_contract_clauseid: '',
          content: ""
        },
        {
          sa_contract_clauseid: '',
          content: ""
        },
        {
          sa_contract_clauseid: '',
          content: ""
        }
      ]*/
    }
  },
};
</script>

<style scoped>
/deep/ .el-descriptions__title {
  font-size: 15px;
  font-weight: 180;
}
/deep/ .my-label {
  width: 160px !important;
  font-size: 14px;
  color: rgb(163, 163, 163) !important;
}
/deep/.el-input__prefix {
  display: flex;
  align-items: center;
}
</style>
