<template>
  <div class="ele-body ele-body-card">
    <el-card shadow="never pd10">
      <el-form label-width="100px" class="customer-info-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地区">
              <regions-select v-model="form.provinceCity" class="ele-fluid" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="form.mobile" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="添加微信">
              <el-select value="" v-model="form.wxgr" disabled>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!--
          <el-col :span="12">
            <car-model-selector
              type="brandSeries"
              title="关注车型"
              :model-value="form.selectedCar"
              v-model="form.selectedCar"
              @update:modelValue="handleCarChange"
            />
          </el-col>
          -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="首次留资">
              <el-input v-model="form.c_time" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最新留资">
              <el-input v-model="form.en_time" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户归属">
              {{ form.belongUser ? form.belongUser.username : '' }}
              ({{ form.belongUser ? form.belongUser.userCode : '' }})
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="ele-form-actions" style="text-align: center">
              <el-button
                size="mini"
                type="primary"
                @click="save"
                :loading="saveLoading"
                >保存</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 留资记录 -->
      <ele-pro-table
        ref="table"
        :columns="columns2"
        :datasource="datasource2"
        cache-key="receiverCustomerEnrollTables"
        style="margin-top: 10px"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-link>留资记录</el-link>
        </template>
      </ele-pro-table>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="receiverCustomerOptTables"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-link>跟进记录</el-link>
          <el-link type="primary" @click="showAddLog">新增小记</el-link>
        </template>
        <!-- 操作列 -->
        <template v-slot:content="{ row }">
          <template v-if="row.rec_url">
            <audio controls="controls">
              <source :src="row.rec_url" />
            </audio>
          </template>
          <template v-else-if="row.rec_text">
            {{ row.rec_text }}
          </template>
          <template v-else>{{ row.log }}</template>
        </template>
      </ele-pro-table>
    </el-card>
    <el-dialog title="新增小记" :visible.sync="addLogVisible" width="40%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="意向购车周期:">
          <el-select clearable v-model="addForm.buy_time">
            <el-option
              v-for="(item, index) in buyTimeList"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容:">
          <el-input
            clearable
            v-model="addForm.content"
            placeholder="请输入内容"
            :rows="4"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addLogVisible = false">取消</el-button>
          <el-button type="primary" @click="addLog">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import {
    getClues,
    pageCluesOptLog,
    addCluesOptLog,
    pageCluesEnroll,
    updateClues
  } from '@/api/receiver/clues';
  // import CarModelSelector from '@/components/CarSelector/index.vue';
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  const ROUTE_PATH = '/receiver/clues/detail';
  export default {
    name: 'receiverCluesDetail',
    components: { RegionsSelect },
    data() {
      return {
        loading: false,
        form: {
          id: '',
          name: '',
          mobile: '',
          c_time: '',
          en_time: '',
          selectedCar: {},
          wxgr: 0,
          provinceCity: [],
          cfrom: '',
          belongUser: []
        },
        addForm: {
          id: '',
          content: '',
          buy_time: ''
        },
        title: '',
        // 表格列配置
        columns: [
          {
            prop: 'uname',
            label: '操作人员',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'content',
            slot: 'content',
            label: '内容',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'type_name',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'c_time',
            label: '时间',
            align: 'center',
            width: 200,
            resizable: false,
            showOverflowTooltip: true
          }
        ],
        // 留资列表配置
        columns2: [
          {
            prop: 'sid',
            label: '编号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'mobile',
            label: '手机号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandName',
            label: '关注品牌车型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'cfrom2',
            label: '留资渠道',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'c_time',
            label: '时间',
            align: 'center',
            resizable: false,
            showOverflowTooltip: true
          }
        ],
        addLogVisible: false,
        buyTimeList: [],
        saveLoading: false
      };
    },
    created() {},
    methods: {
      query() {
        const id = this.$route.query.id;
        if (!id || this.form.id === Number(id)) {
          return;
        }
        this.loading = true;
        getClues({ id: Number(id) })
          .then((data) => {
            this.loading = false;
            this.$util.assignObject(this.form, { ...data });
            this.buyTimeList = data.buyTimeList;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        where['id'] = this.form.id;
        return pageCluesOptLog({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload() {
        if (this.$refs.table && typeof this.$refs.table.reload === 'function') {
          this.$refs.table.reload({ page: 1, where: this.where });
        } else {
          console.warn('表格引用或 reload 方法不存在');
        }
      },
      datasource2({ page, limit, where, order }) {
        where['id'] = this.form.id;
        return pageCluesEnroll({ ...where, ...order, page, limit });
      },
      handleCarChange(carInfo) {
        this.form.selectedCar = carInfo;
      },
      showAddLog() {
        this.addLogVisible = true;
      },
      addLog() {
        addCluesOptLog(this.addForm)
          .then((msg) => {
            this.addLogVisible = false;
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      save() {
        console.log(this.form);
        if (this.saveLoading) {
          return false;
        }
        this.saveLoading = true;
        updateClues(this.form)
          .then((msg) => {
            this.$message.success(msg);
            this.query();
            this.reload();
          })
          .catch((e) => {
            this.$message.error(e.message);
          })
          .finally(() => {
            this.saveLoading = false;
          });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.title = this.$route.query.title
            ? this.$route.query.title
            : '线索详情';
          this.form.id = this.$route.query.id;
          this.addForm.id = this.$route.query.id;
          setPageTabTitle(this.title);
          this.query();
          this.reload();
        },
        immediate: true
      }
    }
  };
</script>
<style scoped>
  .pd10 {
    padding: 10px;
  }
</style>
