<template>
  <div class="mlt">
    <div>
      <el-form :inline="true" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="tag" style="width: 250px" placeholder="请输入供应商名称" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addSupplier">添加</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="name"
          label="供应商名称"/>
        <el-table-column
          prop="tel"
          label="供应商电话"/>
        <el-table-column
          prop="address"
          label="供应商地址"/>
        <el-table-column
          prop="alipay"
          label="支付宝账号"/>
        <el-table-column
          prop="weChat"
          label="微信账号"/>
        <el-table-column
          prop="bankCard"
          label="银行卡号"/>
        <el-table-column
          prop="userName"
          label="创建者"/>
        <el-table-column
          prop="supplierLevel"
          label="供应商级别"/>
          <!--el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editSupplier(scope.row, 1)">编辑</el-button>
            <el-button type="text" @click="deleteSupplierConfirm(scope.row)">删除</el-button>
            <el-button v-if="scope.row.forSale !== 1" type="text" @click="doForSale(scope.row.id,1)">上架</el-button>
            <el-button v-if="scope.row.forSale === 1" type="text" @click="doForSale(scope.row.id,0)">下架</el-button>
            <el-button type="text" @click="editSupplier(scope.row, 2)">详情</el-button>
          </template>
        </el-table-column-->
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
    <!--弹出框-->
    <el-dialog :visible.sync="dialogFormVisiable" title="添加供应商基本信息">
      <el-form :model="addForm" :rules="rules" :label-width="formLabelWidth" >
        <el-form-item label="供应商标题" prop="caseTitle">
          <el-input v-model="addForm.caseTitle" placeholder="请输入供应商名称" size="mini"/>
        </el-form-item>
        <el-form-item label="供应商logo标题" prop="logoTitle">
          <el-input v-model="addForm.logoTitle" placeholder="请输入供应商logo标题" size="mini"/>
        </el-form-item>
        <el-form-item label="供应商副标题" prop="subTitle">
          <el-input v-model="addForm.subTitle" placeholder="请输入供应商副标题" size="mini"/>
        </el-form-item>
        <!--el-form-item label="供应商类型" prop="caseType">
          <el-select v-model="addForm.types" multiple placeholder="请选择供应商类型">
            <el-option
              v-for="item in caseTypes"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"/>
          </el-select>
        </el-form-item-->
        <el-form-item label="供应商类型">
          <el-collapse v-model="activeTypesNames">
            <el-collapse-item :disabled="showDetail" title="" name="picktype">
              <el-checkbox-group :disabled="showDetail" v-model="types">
                <el-checkbox
                  v-for="item in caseTypes"
                  :key="item.typeName"
                  :label="item.id"
                >{{ item.typeName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input v-model="addForm.destination" placeholder="请输入目的地" size="mini"/>
        </el-form-item>
        <el-form-item label="行程天数" prop="days">
          <el-input v-model="addForm.days" placeholder="请输入行程天数" size="mini"/>
        </el-form-item>
        <el-form-item label="人均价格" prop="price">
          <el-input v-model="addForm.price" placeholder="请输入人均价格" size="mini"/>
        </el-form-item>
        <el-form-item label="供应商图集" >
          <el-upload
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
            :limit="5"
            :on-exceed="handleExceed2"
            :file-list="photoList"
            list-type="picture-card">
            <i class="el-icon-plus"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addSupplierCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="addSupplierSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑详情弹出框-->
    <el-dialog :visible.sync="dialogModifyVisiable" :before-close="beforeClose" >
      <span class="tabtitle">完善供应商详情</span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <p/>
          <el-form :model="modifyForm" :rules="rules" :label-width="formLabelWidth">
            <el-form-item label="供应商名称" prop="caseTitle">
              <el-input :disabled="showDetail" v-model="modifyForm.caseTitle" placeholder="请输入供应商名称" size="mini"/>
            </el-form-item>
            <el-form-item label="供应商logo标题" prop="logoTitle">
              <el-input :disabled="showDetail" v-model="modifyForm.logoTitle" placeholder="请输入供应商logo标题" size="mini"/>
            </el-form-item>
            <el-form-item label="供应商副标题" prop="subTitle">
              <el-input :disabled="showDetail" v-model="modifyForm.subTitle" placeholder="请输入供应商副标题" size="mini"/>
            </el-form-item>
            <!--el-form-item label="供应商类型" prop="caseType">
              <el-select :disabled="showDetail" v-model="modifyForm.types" placeholder="请选择供应商类型">
                <el-option
                  v-for="item in caseTypes"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"/>
              </el-select>
            </el-form-item-->
            <el-form-item label="供应商类型">
              <el-collapse v-model="activeTypesNames">
                <el-collapse-item :disabled="showDetail" title="" name="picktype">
                  <el-checkbox-group :disabled="showDetail" v-model="types">
                    <el-checkbox
                      v-for="item in caseTypes"
                      :key="item.typeName"
                      :label="item.id"
                    >{{ item.typeName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>
            <el-form-item label="目的地" prop="destination">
              <el-input :disabled="showDetail" v-model="modifyForm.destination" placeholder="请输入目的地" size="mini"/>
            </el-form-item>
            <el-form-item label="行程天数" prop="days">
              <el-input :disabled="showDetail" v-model="modifyForm.days" placeholder="请输入行程天数" size="mini"/>
            </el-form-item>
            <el-form-item label="人均价格" prop="price">
              <el-input :disabled="showDetail" v-model="modifyForm.price" placeholder="请输入人均价格" size="mini"/>
            </el-form-item>
            <el-form-item label="供应商图集" >
              <el-upload
                :disabled="showDetail"
                :action="uploadUrl"
                :headers="uploadHeaders"
                :on-remove="handleRemove2"
                :on-success="handleSuccess2"
                :limit="5"
                :on-exceed="handleExceed2"
                :file-list="photoList"
                list-type="picture-card">
                <i class="el-icon-plus"/>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="tabbutton">
            <el-button :disabled="showDetail" size="mini" @click="updateSupplierCancel">取 消</el-button>
            <el-button :disabled="showDetail" size="mini" type="primary" @click="updateSupplier">确 定</el-button>
          </div>

        </el-tab-pane>
        <el-tab-pane label="行程特色" name="second">
          <div>
            <tinymce ref="myTinymce" v-model="tripSpercial" :height="300" />
          </div>
          <br>
          <div class="tabbutton">
            <el-button :disabled="showDetail" size="mini" @click="updateSupplierCancel">取 消</el-button>
            <el-button :disabled="showDetail" size="mini" type="primary" @click="updateSupplier">确 定</el-button>
          </div>
          <!--div class="editor-content" v-html="tripSpercial" /-->
        </el-tab-pane>
        <el-tab-pane label="行程列表" name="third">
          <div>
            <el-form :inline="true" :disabled="showDetail" size="mini">
              <el-row>
                <el-form-item>
                  <el-input v-model="tripTag" style="width: 250px" placeholder="请输入行程名称" class="search_tag" clearable/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="trip_btn_search()"><i class="el-icon-search"/> 查询</el-button>
                  <el-button @click="trip_btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
                  <el-button type="primary" icon="el-icon-plus" @click="trip_addTrip">添加</el-button>
                </el-form-item>
              </el-row>
            </el-form>
            <el-table
              ref="multipleTable"
              :data="tripTableData"
              :highlight-current-row="true"
              border>
              <el-table-column
                prop="id"
                label="编号"/>
              <el-table-column
                prop="tripTitle"
                label="行程标题"/>
              <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-button :disabled="showDetail" type="text" @click="trip_editTrip(scope.row)">编辑</el-button>
                  <el-button :disabled="showDetail" type="text" @click="trip_deleteTripConfirm(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mydiv">
              <el-pagination
                :current-page.sync="tripPageNo"
                :page-sizes="[10, 50, 100, 300,1000]"
                :page-size="tripPageSize"
                :total="tripTotalDataNumber"
                layout="sizes,total, prev, pager, next"
                class="table-pagination"
                @size-change="trip_handleSizeChange"
                @current-change="trip_handleCurrentChange"/>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报价说明" name="fourth">
          <p style="text-align: center;font-size: 20px;font-weight: bold">参考报价</p>
          <el-form :model="modifyForm" :rules="rules" :label-width="formLabelWidth">
            <el-form-item label="人均价格" prop="caseTitle">
              <el-input :disabled="showDetail" v-model="modifyForm.price" placeholder="请输入人均价格" size="mini"/>
            </el-form-item>
            <el-form-item label="报价包含">
              <el-collapse v-model="activeNames">
                <el-collapse-item :disabled="showDetail" title="" name="pickitem">
                  <el-checkbox-group :disabled="showDetail" v-model="dataModel">
                    <el-checkbox
                      v-for="item in priceItems"
                      :key="item.itemName"
                      :label="item.id"
                    > <img :src="item.icon" width="20" height="20">{{ item.itemName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>
            <el-form-item label="报价说明" >
              <el-input
                v-model="modifyForm.priceDescription"
                :rows="5"
                :disabled="showDetail"
                placeholder="请输入报价说明"
                size="mini"
                type="textarea"/>
            </el-form-item>
          </el-form>
          <div class="tabbutton">
            <el-button :disabled="showDetail" size="mini" @click="updateSupplierCancel">取 消</el-button>
            <el-button :disabled="showDetail" size="mini" type="primary" @click="updateSupplier">确 定</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 点击删除供应商按钮，删除确认框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的供应商? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!--添加行程弹出框 -->
    <el-dialog :visible.sync="tripDialogFormVisiable" title="添加行程">
      <el-form :model="tripAddForm" :rules="rules" :label-width="formLabelWidth" >
        <el-form-item label="行程标题" prop="tripTitle">
          <el-input v-model="tripAddForm.tripTitle" placeholder="请输入行程标题" size="mini"/>
        </el-form-item>
        <!--el-form-item label="行程类型" prop="tripType">
          <el-select v-model="tripAddForm.type" clearable placeholder="请选择" @change="tripSetTypes()">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="关联实体" prop="tripType">
          <el-select v-model="tripAddForm.relationId" clearable placeholder="请选择">
            <el-option
              v-for="item in valueOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="行程备注" prop="tripInfo">
          <el-input v-model="tripAddForm.info" placeholder="请输入行程备注" size="mini"/>
        </el-form-item-->
        <el-form-item
          v-for="(domain, index) in domains"
          :label="'行程项目' + index "
          :key="domain.key"
        >
          <span>项目类型:</span>
          <el-select v-model="domain.type" clearable placeholder="请选择" size="mini" @change="tripSetTypes(domain)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <br><span>关联项目:</span>
          <el-select v-model="domain.relationId" clearable placeholder="请选择" size="mini">
            <el-option
              v-for="item in domain.valueOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
          <br><span>项目备注:</span>
          <el-input
            v-model="domain.info"
            :rows="5"
            placeholder="请输入项目备注"
            size="mini"
            type="textarea"/>
          <br><el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">增加项目</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="trip_addTripCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="trip_addTripSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="tripDialogModifyVisiable" title="修改行程">
      <el-form :model="tripModifyForm" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="行程标题" prop="tripTitle">
          <el-input v-model="tripModifyForm.tripTitle" placeholder="请输入行程标题" size="mini"/>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in domains"
          :label="'行程项目' + index "
          :key="domain.key"
        >
          <span>项目类型:</span>
          <el-select v-model="domain.type" clearable placeholder="请选择" size="mini" @change="tripSetTypes(domain)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <br><span>关联项目:</span>
          <el-select v-model="domain.relationId" clearable placeholder="请选择" size="mini">
            <el-option
              v-for="item in domain.valueOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
          <br><span>项目备注:</span>
          <el-input
            v-model="domain.info"
            :rows="5"
            placeholder="请输入项目备注"
            size="mini"
            type="textarea"/>
          <br><el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">增加项目</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="trip_updateTripCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="trip_updateTrip">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击删除行程按钮，删除确认框-->
    <el-dialog
      :visible.sync="tripDeleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的行程? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tripDeleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="trip_handleClickDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'Supplier',
  components: { Tinymce },
  data() {
    return {
      rules: {
        caseTitle: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
        logoTitle: [{ required: true, message: '请输入logo标题', trigger: 'blur' }],
        subTitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
        caseType: [{ required: true, message: '请选择供应商类型', trigger: 'blur' }],
        destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
        days: [{ required: true, message: '请输入行程天数', trigger: 'blur' }],
        price: [{ required: true, message: '请输入人均价格', trigger: 'blur' }],
        tripTitle: [{ required: true, message: '请输入行程标题', trigger: 'blur' }],
        tripType: [{ required: true, message: '请输入行程类型', trigger: 'blur' }],
        tripInfo: [{ required: true, message: '请输入行程备注', trigger: 'blur' }]
      },
      options: [{
        value: '1',
        label: '机票'
      }, {
        value: '2',
        label: '活动'
      }, {
        value: '3',
        label: '景点'
      }, {
        value: '4',
        label: '酒店'
      }, {
        value: '5',
        label: '早餐'
      }, {
        value: '6',
        label: '午餐'
      }, {
        value: '7',
        label: '晚餐'
      }, {
        value: '8',
        label: '交通'
      }, {
        value: '9',
        label: '团建'
      }],
      tag: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '150px', // 弹出框form宽
      dialogFormVisiable: false,
      dialogModifyVisiable: false,
      deleteDialogVisible: false,
      caseTypes: [],
      types: [],
      addForm: {
        caseTitle: '',
        logoTitle: '',
        subTitle: '',
        destination: '',
        days: '',
        price: '',
        photos: ''
      },
      modifyForm: {
        id: '',
        caseTitle: '',
        logoTitle: '',
        subTitle: '',
        destination: '',
        days: '',
        price: '',
        priceDescription: ''
      },
      tripSpercial: '',
      deleteId: '',
      logoList: [],
      photoList: [],
      uploadUrl: process.env.UPLOAD_URL,
      uploadHeaders: {
        token: getToken()
      },
      showDetail: false,
      activeName: 'first',
      // previousName: '',
      dataModel: [],
      priceItems: [],
      activeNames: ['pickitem'],
      activeTypesNames: ['picktype'],
      tripTag: '',
      tripAllData: [], // 所有前端分页数据
      tripTableData: [], // 表格数据 仅展示当前页的数据
      tripPageNo: 1, // 当前页数
      tripTotalDataNumber: 0, // 总记录数
      tripPageSize: 10,
      tripDialogFormVisiable: false,
      tripDialogModifyVisiable: false,
      tripDeleteDialogVisible: false,
      tripAddForm: {
        tripTitle: '',
        tripContent: ''
      },
      tripModifyForm: {
        id: '',
        tripTitle: '',
        tripContent: ''
      },
      domains: [
        { type: '',
          valueOptions: [],
          relationId: '',
          info: ''
        }],
      saveDomains: [
        { type: '',
          relationId: '',
          info: ''
        }],
      hotels: [],
      places: [],
      restaurants: [],
      teambuilders: [],
      planetickets: []
    }
  },
  created() {
    this.btn_search()
  },
  methods: {
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/supplier/listpage', {
        params: {
          tag: this.tag,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.data.totalElements)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data.content
            vm.tableData = obj.data.content // obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.pageNo = 1
      this.btn_search()
    },
    handleCurrentChange() {
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      this.btn_search()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.btn_search()
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    addSupplier() {
      this.dialogFormVisiable = true
    },
    addSupplierCancel() {
      this.dialogFormVisiable = false
      this.clearForm()
    },
    clearForm() {
      this.addForm.caseTitle = ''
      this.addForm.logoTitle = ''
      this.addForm.subTitle = ''
      this.addForm.detail = ''
      this.addForm.address = ''
      this.modifyForm.id = ''
      this.modifyForm.caseTitle = ''
      this.modifyForm.logoTitle = ''
      this.modifyForm.subTitle = ''
      this.modifyForm.detail = ''
      this.modifyForm.address = ''
      this.activeName = 'first'
      this.photoList = []
      this.dataModel = []
      this.types = []
      this.showDetail = false
    },
    addSupplierSubmit() {
      const vm = this
      var params = new URLSearchParams()
      if (vm.addForm.caseTitle === '') {
        this.$message.error('请输入供应商名称')
        return
      }
      if (vm.types.length === 0) {
        this.$message.error('请选择供应商类型')
        return
      }
      if (vm.addForm.destination === '') {
        this.$message.error('请输入供应商目的地')
        return
      }
      if (vm.addForm.days === '') {
        this.$message.error('请输入供应商行程天数')
        return
      }
      if (vm.addForm.price === '') {
        this.$message.error('请输入供应商人均价格')
        return
      }
      params.append('caseTitle', vm.addForm.caseTitle)
      params.append('logoTitle', vm.addForm.logoTitle)
      params.append('subTitle', vm.addForm.subTitle)
      params.append('types', vm.types)
      params.append('destination', vm.addForm.destination)
      params.append('days', vm.addForm.days)
      params.append('price', vm.addForm.price)
      if (vm.logoList !== undefined && vm.logoList.length > 0) {
        params.append('logo', vm.logoList[0].url)
      }
      if (vm.photoList !== undefined && vm.photoList.length > 0) {
        for (let i = 0; i < vm.photoList.length; i++) {
          vm.addForm.photos += vm.photoList[i].url + ','
        }
        params.append('photos', vm.addForm.photos)
      }
      axios.post(process.env.BASE_API + '/supplier/create', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.clearForm()
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.dialogFormVisiable = false
    },
    editSupplier(row, value) {
      this.dialogModifyVisiable = true
      this.modifyForm = row
      if (this.modifyForm.priceDescription === null) {
        this.modifyForm.priceDescription = ''
      }
      if (row.tripSpercial === null) {
        this.tripSpercial = ''
      } else {
        this.tripSpercial = row.tripSpercial
      }
      this.dataModel = []
      if (row.items !== null && row.items !== undefined && row.items !== '') {
        var ids = row.items.split(',')
        for (var j = 0; j < ids.length; j++) {
          this.dataModel.push(parseInt(ids[j]))
        }
      }
      if (row.types !== null && row.types !== undefined && row.types !== '') {
        var typeIds = row.types.split(',')
        for (var k = 0; k < typeIds.length; k++) {
          this.types.push(parseInt(typeIds[k]))
        }
      }
      if (value === 2) {
        this.showDetail = true
      }
      if (row.logo !== undefined) {
        this.logoList.push({
          url: row.logo
        })
      }
      if (row.photos !== undefined && row.photos !== null) {
        var strs = row.photos.split(',')
        for (var i = 0; i < strs.length - 1; i++) {
          this.photoList.push({
            url: strs[i]
          })
        }
      }
    },
    updateSupplierCancel() {
      this.dialogModifyVisiable = false
      this.clearForm()
      this.btn_search()
      this.showDetail = false
    },
    updateSupplier() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.modifyForm.id)
      params.append('caseTitle', vm.modifyForm.caseTitle)
      params.append('logoTitle', vm.modifyForm.logoTitle)
      params.append('subTitle', vm.modifyForm.subTitle)
      params.append('destination', vm.modifyForm.destination)
      params.append('tripSpercial', vm.tripSpercial)
      params.append('days', vm.modifyForm.days)
      params.append('price', vm.modifyForm.price)
      if (vm.logoList !== undefined && vm.logoList.length > 0) {
        params.append('logo', vm.logoList[0].url)
      }
      if (vm.photoList !== undefined && vm.photoList.length > 0) {
        var strs = ''
        for (let i = 0; i < vm.photoList.length; i++) {
          strs = strs + vm.photoList[i].url + ','
        }
        params.append('photos', strs)
      }
      params.append('items', vm.dataModel)
      params.append('types', vm.types)
      params.append('priceDescription', vm.modifyForm.priceDescription)
      axios.post(process.env.BASE_API + '/supplier/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
        vm.clearForm()
      }).catch(function(error) {
        alert(error)
      })
      this.dialogModifyVisiable = false
      this.showDetail = false
    },
    deleteSupplierConfirm(row) {
      this.deleteId = row.id
      this.deleteDialogVisible = true
    },
    handleClickDelete() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.deleteId)
      axios.post(process.env.BASE_API + '/supplier/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    },
    handleRemove(file, fileList) {
      this.logoList = fileList
    },
    handleSuccess(res, file, fileList) {
      if (res.code === 10000) {
        this.logoList.push({
          url: res.imageUrl
        })
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleRemove2(file, fileList) {
      this.photoList = fileList
    },
    handleSuccess2(res, file, fileList) {
      if (res.code === 10000) {
        this.photoList.push({
          url: res.imageUrl
        })
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
      }
    },
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    closeDialog() {
      this.logoList = []
      this.photoList = []
      this.showDetail = false
      this.activeName = 'first'
    },
    beforeClose() {
      if (this.showDetail === true) {
        this.updateSupplierCancel()
      } else {
        this.$confirm('确认保存并关闭窗口？')
          .then(_ => {
            this.updateSupplier()
          })
          .catch(_ => {
            this.updateSupplierCancel()
          })
      }
    },
    handleClick(tab, event) {
      /* if (this.previousName === 'second' && this.activeName !== 'second') {
        console.log('保存行程特色')
      } else if (this.previousName === 'third' && this.activeName !== 'third') {
        console.log('保存行程列表')
      } else if (this.previousName === 'fourth' && this.activeName !== 'fourth') {
        console.log('保存报价说明')
      } else if (this.previousName === 'first' && this.activeName !== 'first') {
        console.log('保存基本信息')
      }
      this.previousName = this.activeName */
      if (this.activeName === 'third') {
        this.trip_btn_search()
      }
      if (this.activeName === 'second') {
        // console.log(this.tripSpercial)
        if (this.tripSpercial === null) {
          this.tripSpercial = ''
        }
        this.$refs.myTinymce.setContent(this.tripSpercial)
      }
    },
    // ---行程函数开始
    trip_btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/trip/list', {
        params: {
          tag: this.tripTag,
          caseId: this.modifyForm.id
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          // vm.$message.error(obj.message)
          vm.tripTotalDataNumber = 0
          vm.tripAllData = []
          vm.tripTableData = []
        } else {
          vm.tripTotalDataNumber = parseInt(obj.total)
          if (vm.tripTotalDataNumber > 0) {
            vm.tripAllData = obj.data
            vm.tripTableData = obj.data.slice(0, vm.tripPageSize)
          } else {
            vm.tripAllData = []
            vm.tripTableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    trip_btn_clear() {
      this.tripTag = ''
      this.tripPageNo = 1
      this.trip_btn_search()
    },
    trip_handleCurrentChange() {
      this.tripTableData = this.tripAllData.slice((this.tripPageNo - 1) * this.tripPageSize, this.tripPageNo * this.tripPageSize)
    },
    trip_handleSizeChange(val) {
      this.tripPageSize = val
      this.tripTableData = this.tripAllData.slice((this.tripPageNo - 1) * this.tripPageSize, this.tripPageNo * this.tripPageSize)
    },
    trip_addTrip() {
      this.tripDialogFormVisiable = true
    },
    trip_addTripCancel() {
      this.tripDialogFormVisiable = false
      this.trip_clearForm()
    },
    trip_clearForm() {
      this.tripAddForm.tripTitle = ''
      this.tripModifyForm.id = ''
      this.tripModifyForm.tripTitle = ''
    },
    trip_addTripSubmit() {
      const vm = this
      var params = new URLSearchParams()
      if (vm.tripAddForm.tripTitle === '') {
        this.$message.error('请输入行程标题')
        return
      }
      params.append('tripTitle', vm.tripAddForm.tripTitle)
      for (var i = 0; i < this.domains.length; i++) {
        console.log(this.domains[i].type)
        console.log(this.domains[i].relationId)
        console.log(this.domains[i].info)
      }
      vm.tripAddForm.tripContent = JSON.stringify(vm.domains)
      params.append('tripContent', vm.tripAddForm.tripContent)
      params.append('caseId', vm.modifyForm.id)
      axios.post(process.env.BASE_API + '/trip/create', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.tripPageNo = 1
          vm.trip_clearForm()
          vm.trip_btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.tripDialogFormVisiable = false
    },
    trip_editTrip(row) {
      this.tripDialogModifyVisiable = true
      this.tripModifyForm = row
      this.domains = []
      this.domains = JSON.parse(row.tripContent)
      if (this.domains !== null) {
        for (var i = 0; i < this.domains.length; i++) {
          if (this.domains[i].type === '1') {
            this.domains[i].valueOptions = this.planetickets
          } else if (this.domains[i].type === '3') {
            this.domains[i].valueOptions = this.places
          } else if (this.domains[i].type === '4') {
            this.domains[i].valueOptions = this.hotels
          } else if (this.domains[i].type === '5' || this.domains[i].type === '6' || this.domains[i].type === '7') {
            this.domains[i].valueOptions = this.restaurants
          } else if (this.domains[i].type === '9') {
            this.domains[i].valueOptions = this.teambuilders
          } else {
            this.domains[i].valueOptions = []
          }
        }
      } else {
        this.domains = []
      }
    },
    trip_updateTripCancel() {
      this.tripDialogModifyVisiable = false
      this.trip_clearForm()
      this.trip_btn_search()
    },
    trip_updateTrip() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.tripModifyForm.id)
      params.append('tripTitle', vm.tripModifyForm.tripTitle)
      vm.tripModifyForm.tripContent = JSON.stringify(vm.domains)
      params.append('tripContent', vm.tripModifyForm.tripContent)
      axios.post(process.env.BASE_API + '/trip/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.tripPageNo = 1
          vm.trip_btn_search()
        }
        vm.trip_clearForm()
      }).catch(function(error) {
        alert(error)
      })
      this.tripDialogModifyVisiable = false
    },
    trip_deleteTripConfirm(row) {
      this.deleteId = row.id
      this.tripDeleteDialogVisible = true
    },
    trip_handleClickDelete() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.deleteId)
      params.append('caseId', vm.modifyForm.id)
      axios.post(process.env.BASE_API + '/trip/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.tripPageNo = 1
          vm.trip_btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.tripDeleteDialogVisible = false
    },
    tripSetTypes(item) {
      if (item.type === '1') {
        item.valueOptions = this.planetickets
      } else if (item.type === '3') {
        item.valueOptions = this.places
      } else if (item.type === '4') {
        item.valueOptions = this.hotels
      } else if (item.type === '5' || item.type === '6' || item.type === '7') {
        item.valueOptions = this.restaurants
      } else if (item.type === '9') {
        item.valueOptions = this.teambuilders
      } else {
        item.valueOptions = []
      }
      item.relationId = ''
    },
    submitForm(items) {
      /* for (var i = 0; i < items.length; i++) {
        console.log(items[i].type)
        console.log(items[i].relationId)
        console.log(items[i].info)
      }*/
      for (var i = 0; i < this.domains.length; i++) {
        console.log(this.domains[i].type)
        console.log(this.domains[i].relationId)
        console.log(this.domains[i].info)
      }
    },
    removeDomain(item) {
      var index = this.domains.indexOf(item)
      if (index !== -1) {
        this.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.domains.push({
        type: '',
        relationId: '',
        info: ''
      })
    },
    // --- 行程函数结束
    doForSale(id, forSale) {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', id)
      params.append('forSale', forSale)
      axios.post(process.env.BASE_API + '/case/forsale', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    },
    statusFormatter(ob) {
      if (ob.supplierLevel === undefined) {
        return ''
      } else if (ob.supplierLevel === 1) {
        return '已上架'
      } else if (ob.supplierLevel === 2) {
        return '未上架'
      } else if (ob.supplierLevel === 3) {
        return '未上架'
      } else if (ob.supplierLevel === 4) {
        return '未上架'
      } else if (ob.supplierLevel === 5) {
        return '未上架'
      } else {
        return '未知'
      }
    }
  }
}
</script>

<style scoped>
  .mlt {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .tabtitle {
    font-size: 24px;
    font-weight: bold;
  }
  .tabbutton {
    float: right;
  }
</style>
